Abstract: Vue has set a hook function (monitor function) for each state in the life cycle. Whenever the Vue instance is in a different life cycle, the corresponding function will be triggered to call.
This article is shared from the " " article from HUAWEI CLOUD COMMUNITY to take you to understand the eight life cycle hook functions of Vue , the original author: Night of the Northern Lights. .
1. Quick recognition concept:
We call the process of an object from creation (new) to destruction (destory) the life cycle. The life cycle function is a function that will be executed automatically at a certain moment.
According to the official original words, each Vue instance goes through a series of initialization processes when it is created-for example, you need to set up data monitoring, compile templates, mount the instance to the DOM, and update the DOM when the data changes. At the same time, some functions called life cycle hooks are also run during this process, which gives users the opportunity to add their own code at different stages.
Simply put, each Vue instance goes through a series of initialization processes when it is created: creating an instance, loading a template, rendering a template, and so on. Vue sets hook functions (monitor functions) for each state in the life cycle. Whenever the Vue instance is in a different life cycle, the corresponding function will be triggered to call.
2. Eight life cycle hook functions:
The following is the life cycle diagram in the official document, students who are good at English can take a look: Insert picture description here
Three. Combine the code to understand:
First look at the basic code of the case as follows, and then use the following code steps to demonstrate the life cycle functions executed at each stage of the process of an object from generation to destruction. Pay attention to the role of the show function.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{information}}
</div>
<script type="text/javascript">
//创建vue实例
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
}
})
// 各个生命周期函数通过调用下面这个函数了解其所处的生命阶段
function show(inf,obj){
console.log(inf);
console.log("------------------------------------------");
console.log('获取vue实例data里的数据:');
console.log(obj.information);
console.log("------------------------------------------");
console.log('挂载的对象，就是DOM：');
console.log(obj.$el);
console.log("------------------------------------------");
console.log('页面上已经挂载的DOM：');
console.log(document.getElementById('app').innerHTML);
}
</script>1. beforeCreate：
At this stage, the vue instance has just been created in memory, and data and methods are not initialized at this time. Add the beforeCreate hook function in the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeCreate: function(){
// 传入该阶段简介与this，this就是该阶段的vue实例
show('vue实例初始化之前',this);
}
})Look at the results of the operation:
As you can see, the vue instance has just been created in memory at this time, and everything else is undefined.
2.created：
At this stage, the vue instance has been created in memory, data and methods can also be obtained, but the template has not yet been compiled. Add the created hook function in the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
created: function(){
show('vue实例初始化之后',this);
}
})See the result:
Do you see it? I already know the data in data. No other words.
3.beforeMount：
The compilation of the template is completed at this stage, but it has not yet been mounted on the page. Add a hook function in the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeMount: function(){
show('挂载之前',this);
}
})See the result:
Have you seen it? The objects to be mounted are compiled, but the DOM tree of the page has not been mounted yet, and the page has not been displayed at this stage.
4.mounted：
At this stage, the template is compiled and mounted on the page, and the page can be displayed. Add a hook function in the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
mounted: function(){
show('挂载之后',this);
}
})See the result:
5.beforeUpdate:
Execute this function before the transition update. At this time, the state value of the data in the data has been updated to the latest, but the data displayed on the page is still the most original, and the DOM tree has not been re-rendered.
First change the data in data:
vm.information ='Night of the Southern Aurora';
Add a hook function in the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeUpdate: function(){
show('更新之前',this);
}
})See the result:
Did you see that the data in the vue instance has become the night of the Southern Aurora. But at this stage, the original data of Northern Lights Night is displayed on the DOM node of the page.
6.updated：
At this stage, this function is executed after the transition update is completed. At this time, the state value of the data in the data is the latest, and the data displayed on the page is also the latest, and the DOM node has been re-rendered. Add a hook function in the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
updated: function(){
show('更新之后',this);
}
})Look at the results of the operation:
Updated, all updated~
7.beforeDestroy：
The beforeDestroy stage is before the vue instance is destroyed. Of course, the vue instance can still be used at this stage.
Destroy the Vue instance:
vm.$destroy();
Add a hook function in the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeDestroy: function() {
show('销毁之前',this);
}
})See the effect:
8.destroyed：
This stage is called after the vue instance is destroyed. At this time, everything indicated by all instances will be unbound, event listeners are also removed, and child instances are also destroyed.
Add a hook function in the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
destroyed: function() {
show('销毁之后',this);
}
})See the result:
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。