Writing this blog is not to get many likes, but mainly because there are too many pitfalls when using Vue to develop projects. I don’t understand or encounter problems before, so I can find out here, I don’t want people to encounter such pitfalls again, and those who do technology must know how to share, to be a human being, the most important thing is to be happy.
The official website of vue says, "You don't need to figure this out for now...", I think that since you are going to use vue for development, if you don't understand it, you will find that the pits you stepped on are still caused by it after all, and later Come back to fill the hole, it is better to take it now.
The following is mainly from several aspects:
1. What is the life cycle of vue
2. The execution order of the vue life cycle in the project
3. The built-in method properties in vue and the running order of the vue life cycle (methods, computed, data, watch)
4. Self-constructed methods and the running order of the vue life cycle, such as show
5. Summary
1. What is the life cycle of vue
Each component of Vue is independent, and each component has a life cycle that belongs to it. From a component creation, data initialization, mounting, updating, and destruction , this is the so-called life cycle of a component. The specific methods in the component are:
beforeCreate
created
beforeMount
mounted
(
beforeUpdate
updated
)
beforeDestroy
destroyed
The corresponding Chinese is just like its literal meaning. Children's shoes with poor English can be searched properly.
Ok, here is the picture~~~
2. The execution sequence of the vue life cycle in the project
...
data () {
return {
rendered: false,
}
}
...
1.beforeCeate(){
console.log(this.rendered); // undefined
}
2.created() {
console.log(this.$el);//undefined
console.log(this.rendered); // false
}
3.beforeMount() {
console.log(this.$el)；//undefined
}
4.mounted() {
console.log(this.$el);
}
5.beforeDestroy(){
console.log(this.$el);
console.log(this.rendered);
}
6.destroyed() {
console.log(this.$el);
console.log(this.rendered);
}
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 can know that the initialization of data is completed when the data observer is created, and such as methods, computed attribute props, etc. have been initialized; then the problem comes,
What is the order in which data props computed watch methods are generated between them?
According to looking at the vue source code, we can see:
props => methods =>data => computed => watch ; understand
4. The method of self-construction and the running order of the vue life cycle such as show
Often we often use $refs to directly access the method of subcomponents when developing projects, but such calls may cause data delays and lags, and bugs will appear.
The solution is to recommend the method of asynchronous callback , and then pass in the parameters, and strictly abide by the life cycle of vue to resolve the promise of es6.
Sample code:
handleAsync () {
return new Promise(resolve=>{
const res="";
resolve(res)
})
}
...
async handleShow() {
await this.handleAsync().then(res=>{
this.$refs.child.show(res);
})
}
...
V. Summary
Generally speaking, the life cycle of vue is a mechanism for the creation and destruction of instances. It is also the interactive communication between the data of the vue framework. In fact, it doesn't seem that difficult now, but it is rare to implement this set of mechanisms in the source code of Vue, which involves complex algorithms such as the diff algorithm . Interested children's shoes can learn more about it.