First, each Vue instance goes through a series of initialization processes before it is created , which is the life cycle of Vue. First look at a picture~ This is the picture on the official document, I believe everyone will be familiar with it:
It can be seen that in the entire life cycle of vue, there will be many hook functions for us to operate at different times in the life cycle of vue, then list all the hook functions first, and then we will explain them one by one:
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
Let’s start with a wave of code, you can copy it and run it in the browser, just open the console to view it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue life cycle learning</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'Vue's life cycle'
},
beforeCreate: function() {
console.group('------beforeCreate state before Create------');
console.log("%c%s", "color:red" , "el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //undefined
console.log("%c%s", "color:red","message: " + this.message)
},
created: function() {
console.group('------created completed state------');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeMount: function() {
console.group('------beforeMount state before mount------');
console.log("%c%s", "color:red","el : " + (this.$el)); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
mounted: function() {
console.group('------mounted mount end status------');
console.log("%c%s", "color:red","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data); //已被初始化
console.log("%c%s", "color:red","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group('beforeUpdate status before update ==============="');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
updated: function () {
console.group('updated update completion status ==============="');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy state ==============="');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message);
},
destroyed: function () {
console.group('destroyed completion status ==============="');
console.log("%c%s", "color:red","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:red","data : " + this.$data);
console.log("%c%s", "color:red","message: " + this.message)
}
})
</script>
</html>
After running, open the console and you can see that the printout is as follows:
You can see several lifecycle hooks called during the creation of a vue instance.
1. Lifecycle between beforeCreate and created hooks
During this life cycle, perform initialization events and observe data . You can see that the data has been bound to the data attribute when it is created (when the value of the attribute in data changes, the view will also change) . Note: there is still no el option at this time
2. The life cycle between the created hook function and beforeMount
There is a lot going on at this stage.
First, it will determine whether the object has the el option . If there is, continue to compile down, if there is no el option , stop the compilation, which means stop the life cycle until vm.$mount(el) is called on the vue instance. Comment out the code at this point:
el: '#app',
If we continue to call vm.$mount(el) later, we can find that the code continues to execute down
vm.$mount(el) //This el parameter is the dom contact that hangs on
Then, let's look down, whether the presence or absence of the template parameter option affects the life cycle.
(1). If there is a template parameter option in the vue instance object, it will be compiled into a render function as a template.
(2). If there is no template option, the external HTML is compiled as a template.
(3). It can be seen that the template priority in template is higher than that of outer HTML.
The modified code is as follows, a string of html is added to the HTML structure, and the template option is added to the vue object :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>vue life cycle learning</title>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
</head>
<body>
<div id="app">
<!--modified in html-->
<h1>{{message + 'This is in outer HTML'}}</h1>
</div>
</body>
<script>
var vm = new Vue({
el: '#app',
template: "<h1>{{message +'this is in the template'}}</h1>", //modified in the vue configuration item
data: {
message: 'Vue's life cycle'
}
</script>
</html>
The result after execution can be seen in the page:
Then comment out the template option in the vue object and print the following information:
Now you can think about the judgment of el before the template ~ because vue needs to find the corresponding outer template through el.
There is also a render function in the vue object , which takes createElement as a parameter, and then performs rendering operations, and we can directly embed JSX.
new View({
el: '#app',
render: function(createElement) {
return createElement('h1', 'this is createElement')
}
})
You can see that what is rendered in the page is:
So overall ranking priority:
render function options > template options > outer HTML.
3. Life cycle between beforeMount and mounted hook functions
You can see that the $el member is added to the vue instance object at this time , and the hanging DOM elements are replaced. Because the result printed in the previous console can see that the el is still undefined before beforeMount .
4. mounted
Take a look at the screenshot below:
Before mounting, h1 is still occupied by {{message}} , because it is still hanging on the page at this time, and it still exists in the form of virtual DOM in JavaScript. After mounting, you can see that the content in h1 has changed.
5. Life cycle between beforeUpdate hook function and updated hook function
When vue finds that the data in the data has changed, it will trigger the re-rendering of the corresponding component, and call the beforeUpdate and updated hook functions successively. We enter in the console:
vm.message = 'Trigger component update'
Found that the update of the component was triggered:
6. Life cycle between beforeDestroy and destroyed hook functions
The beforeDestroy hook function is called before the instance is destroyed. At this step, the instance is still fully available.
The destroyed hook function is called after the Vue instance is destroyed. After the call, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all child instances will be destroyed.
This article is my personal understanding of the life cycle of vue. If there is anything wrong, please give me some pointers~