Previous article: I’m glad to have received your support, as well as some questions from people who have asked me about Vue3. In particular, the question of how to obtain the current component instance is the most hotly debated, so let’s add to that

In Vue2 components, we frequently use this to get the current component instance, because each component’s data variables and methods are obtained through the component instance.

Such as:

<script>
export default {
  name: 'App'.data: {
    return {
      name: 'Front impression'.age: 22}},methods: {
    increase() {
      this.age += 1}},mounted() {
    this.increase()
  }  
}
</script>
Copy the code

In the code above, it is clear that the first two responsive data are declared in the data: name and age; It also defines a method increase, which adds the value of age +1; The increase method is called after the current component is mounted

Whether we get the age or the increase method, we get it from this, the current component instance

In Vue3, most, if not all, of the key code is written in the setup function, where the current component instance cannot be obtained through this, because all variables and methods are available directly

Such as:

<script>
import {ref, onMounted} from 'vue'
export default {
  name: 'App'.setup() {
    const name = ref('Front impression')
    const age = ref(22)

    function increase() {
      age.value += 1
    }

    onMounted(() = > {
      increase()
    })

    return {name, age}
  }
}
</script>
Copy the code

This code does exactly the same thing as the previous code, but it does not retrieve data variables or methods from the component instance from the beginning to the end. This certainly reduces a lot of code duplication, such as using this multiple times, and the original intention of Vue3 is that we do not need to retrieve the current component instance

However, the getCurrentInstance method described in the previous article does retrieve component instances, as shown in the figure below

But that’s only ifdevelopmentIn other words, this method is only used for debugging in the development environment.

So what does it look like in a production environment? Let’s package the project and print it out, as shown in the figure below:

Obviously, in thectxThere is no shadow of the current component instance, only one_Let’s click in and see what’s inside, as shown in the picture

And by clicking, we found_It goes on forevergetCurrentInstanceMethod, so there is a difference between development and production environments

So, again, how do we get a component instance for Vue3? Here I want to say ha, all this, still what component instance, don’t believe me to give you a list

1. Obtain data

Vue2:

<script>
export default {
  name: 'App'.data: {
    return {
      name: 'Front impression'.age: 22}},mounted() {
    console.log(this.name)
    console.log(this.age)
  }  
}
</script>
Copy the code

Vue3:

<script>
import {ref} from 'vue'
export default {
  name: 'App'.setup() {
    const name = ref('Front impression')
    const age = ref(22)

    console.log(name.value)
    console.log(age.value)

    return {name, age}
  }
}
</script>
Copy the code

2. Usage

Vue2:

<script>
export default {
  name: 'App'.methods: {
    show() {
      console.log('Show method is called')}},mounted() {
    this.show()
  }  
}
</script>
Copy the code

Vue3:

<script>
import {onMounted} from 'vue'
export default {
  name: 'App'.setup() {
    function show() {
      console.log('Show method is called')
    }

    onMounted(() = > {
      show()
    })
  }
}
</script>
Copy the code

3. Obtain the root element of the current component

Vue2:

<template>
  <div id="app" ref="root">
    <p class="child"></p>
  </div>
</template>

<script>
export default {
  name: 'App'.mounted() {
    const el = this.$refs.root
    console.log(el)
  }  
}
</script>
Copy the code

Vue3:

<template>
  <div id="app" ref="root">
    <p class="child"></p>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue'
export default {
  name: 'App'.setup() {
    const root = ref(null)

    onMounted(() = > {
      console.log(root.value)
    })
  }
}
</script>
Copy the code

4. The child communicates with the parent component

Vue2:

<script>
export default {
  name: 'App'.methods: {
    change() {
      this.$emit('valueChange'.3)}}}</script>
Copy the code

Vue3:

<script>
export default {
  name: 'App'.setup(props, context) {
    function change() {
      context.emit('valueChange'.3)}}}</script>
Copy the code

5. Obtain the Vuex object

Vue2:

<script>
export default {
  name: 'App'.mounted() {
    console.log(this.$store.state.name)
    this.$store.commit('show')}}</script>
Copy the code

Vue3:

<script>
import {onMounted} from 'vue'
import {useStore} from 'vuex'
export default {
  name: 'App'.setup(props, context) {
    const store = useStore()

    onMounted(() = > {
      console.log(store.name)
      store.commit('show')}}}</script>
Copy the code

Conclusion: Do not rely on the getCurrentInstance method to get the component instance to do some of the main functions, otherwise the project will be packaged, the error will be reported.

👊 recommended reading (I hope you can support 💖)

  • Event Loop in the browser and Node environment
  • Get quick access to Vue3’s latest 15 common apis
  • How to use CommonJS and ES6 Modules

Pay attention to the public number “front-end impression”, update high-quality front-end technical articles every day, but also can get a complete version of JS version of the data structure and algorithm code, in recent years often take the interview questions and other benefits

See here, don’t click 🤞 like?