This blog post isn’t about getting likes, it’s about getting stuck on a lot of projects using VUE. I have not understood or encountered problems here to clarify, do not want to later people to meet such pits, do technology to know how to share, as a person, the most important thing is happy.

The website says, “You don’t have to figure that out yet…” I think since you are going to use VUE for development, if you don’t understand it, you will find that the pit you step on is caused by it after all, and you will repair the pit later, it is better to take it now.

From the following aspects:

1. What is the life cycle of vue
2. Execution sequence of vUE life cycle in the project
3. Method properties built into VUE and the running order of the VUE lifecycle (methods,computed,data,watch)
4. The running sequence of self-constructed methods and VUE life cycle is shown as followsshowthese
5. To summarize

What is the life cycle of vUE

Vue each component is independent, each component has its own life cycle, created from a component, data initialization, mount, update, destroy, this is a component’s so-called life cycle. The specific methods in the component are: beforeCreate created beforeMount mounted beforeUpdate updated activated deactivated beforeDestroy destroyed The corresponding Chinese is just like its literal meaning. If you are not good at English, you can find a way to turn it over. Here is the picture above

Ii. Execution sequence of VUE life cycle in the project

export default {
  data () {
    return {
      rendered: false
    }
  }
}
Copy the code
export default {
  beforeCeate(){
    console.log(this.rendered);  // undefined 
  }
}
Copy the code

export default { created() { console.log(this.$el); //undefined console.log(this.rendered); // false } }Copy the code

Export default {beforeMount() {console.log(this.$el); //undefined } }Copy the code

export default { mounted() { console.log(this.$el); }}Copy the code

export default { beforeDestroy(){ console.log(this.$el); console.log(this.rendered); }}Copy the code

export default { destroyed() { console.log(this.$el); console.log(this.rendered); }}Copy the code

3. The built-in method properties in VUE and the running order of the VUE life cycle (methods,computed,data,watch,props)

From the first and second points, we know that the initialization of data is completed when the data observer is created, and that methods, computed properties, and so on have been initialized. So the question is, what is the generation order between data props computed watch Methods? According to the vue source code:

props ->methods ->data -> computed -> watch; Understand not

Iv. The running sequence of the self-made method and vUE life cycle is shown as followsshowthese

We often use $refs to access sub-components directly when developing projects. However, such calls may cause data delays and bugs. The solution is to recommend an asynchronous callback method and then pass it in, strictly following the vUE lifecycle to resolve the PROMISE of recommending ES6. Sample code:

export default { methods: { handleAsync () { return new Promise(resolve=>{ const res="somedata"; resolve(res) }) }, async handleShow() { await this.handleAsync().then(res=>{ this.$refs.child.show(res); })}}}Copy the code

Five, the summary

The vUE life cycle, in general, is a mechanism for instance creation and destruction. It is also the interactive communication between data of vUE framework. In fact, it now seems not so difficult, but vue source code to achieve this set of mechanisms that is a rare force, involving complex algorithms such as diff algorithm, interested in children’s shoes can go to in-depth understanding. Like the children’s shoes point a praise ah ha ha, again to cheat praise