1. Common life cycle functions
Life cycle function is the function that vue instance will execute automatically at a certain point in time
When we create an instance, that is, when we call new Vue(), vue will help us create an instance. The creation process is not as simple as we think. It takes many steps
Init (Events & lifecycle): first of all, it will initialize events and life cycle related contents. When the most basic initialization is completed, vue will automatically help me go to a function at this time point, which is beforeCreate
1,beforeCreate
beforeCreate: since beforeCreate is automatically executed, then beforeCreate is a life cycle function
var vm = new Vue({
el:'#app',
beforeCreate:function(){
console.log('before create')
}
})We found that this is automatically output on the console, that is, vue automatically executes the function beforeCreate. After processing this function, vue will continue to call an external injection, including the related contents of two-way binding
Init (injections & reactivity): external injection and initialization of various bindings. When this part of initialization is completed, the initialization operation of vue instance is basically completed. On this node, an automatic function will be executed. The name of this function is created
2,created
created: This is also a lifecycle function, because it fully conforms to the definition of a lifecycle function
var vm = new Vue({
el:'#app',
beforeCreate:function(){
console.log('before create')
},
created:function(){
console.log('created')
}
})You can see that after beforeCreate is executed, created is also executed automatically. Continue to look at this figure
Has' el 'options: is there el this option
Has' template 'options: is there a template attribute
No - > compile el's outerhtml as template: if there is no template attribute in the instance, the html of the external el mount point will be used as a template
Yes - > compile template into render functoin: if there is a template in the instance, it will be rendered with template at this time
However, after having the template, it is not directly rendered to the page. Before rendering, a function is automatically executed. This function is beforeMount
3,beforeMount
beforeMount: this function is also a life cycle function, that is, the template will be mounted to the page. At the moment, beforeMount will be executed
var vm = new Vue({
el:'#app',
template:'<h1>hello</h1>',
beforeCreate:function(){
console.log('before create')
},
created:function(){
console.log('created')
},
beforeMount:function(){
console.log('before mount')
}
})You can see that beforeMount is executed. After beforeMount is executed
Create vm.$el and replace 'el' width it: template combined data will be mounted on the page. When dom is mounted on the page, another life cycle function will be executed
4,mounted
Mounted: Before mount DOM is not rendered on the page, but mounted dom has been rendered on the page. You can do an experiment at this time
<div id='app'>
hello world
</div>
<script>
var vm = new Vue({
el:'#app',
template:'<h1>hello</h1>',
beforeCreate:function(){
console.log('before create')
},
created:function(){
console.log('created')
},
beforeMount:function(){
console.log(this.$el);
console.log('before mount')
},
mounted:function(){
console.log(this.$el);
console.log('mounted')
}
})
</script>
We can see that when dom is < div id ='app '> Hello World < / div >, dom is < H1 > Hello < / H1 > in the output of beforeMount, which also confirms the content of the above figure. When beforeMount, the page has not been rendered, and when mounted, the page has been rendered
5,beforeDestroy,destroyed
beforeDestroy,destroyed:
var vm = new Vue({
el:'#app',
template:'<h1>hello</h1>',
beforeCreate:function(){
console.log('before create')
},
created:function(){
console.log('created')
},
beforeMount:function(){
console.log(this.$el);
console.log('before mount')
},
mounted:function(){
console.log(this.$el);
console.log('mounted')
},
beforeDestroy:function(){
console.log('beforeDestroy')
},
destroyed:function(){
console.log('destroyed')
}
})After refreshing the page, you will find that before destroy and destroyed have not been triggered. When will they be triggered
when vm.$destroy() is called: when the destroy() method is called, beforeDestroy will be called. When it is completely destroyed, destroyed will be executed. How can it be executed? Execute VM on the console$ These two functions will be called during destroy(). beforeDestroy will be called before it is destroyed, and destroyed will be called after it has been destroyed
6,beforeUpdate,updated
beforeUpdate,updated:
var vm = new Vue({
el:'#app',
template:'<h1>hello</h1>',
beforeCreate:function(){
console.log('before create')
},
created:function(){
console.log('created')
},
beforeMount:function(){
console.log(this.$el);
console.log('before mount')
},
mounted:function(){
console.log(this.$el);
console.log('mounted')
},
beforeDestroy:function(){
console.log('beforeDestroy')
},
destroyed:function(){
console.log('destroyed')
},
beforeUpdate:function(){
console.log('before updated')
},
updated:function(){
console.log('updated')
}
})Refresh the page and find that the two hook functions are not actually executed. Why not? Look at the figure and explain that when data changes will be executed when the data changes
beforeUpdate: beforeUpdate will be executed before the data changes and has not been rendered
Updated: after the data is re rendered, the updated life cycle function will be executed
Reference link: