Article directory
1. Quick knowledge concept:
We call the process of an object from creation (new) to being destroyed (destroy), called the life cycle. The life cycle function is a function that will be automatically executed at a certain time.
According to the official words, each Vue instance goes through a series of initialization processes when it is created - for example, it needs to set up data monitoring, compile templates, mount the instance to the DOM and update the DOM when the data changes, etc. At the same time, some functions called lifecycle 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 the instance, loading the template, rendering the template, etc. Vue has hook functions (listener 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 lifecycle hook functions:
| function | call time |
|---|---|
| beforeCreate | Called before the vue instance is initialized |
| created | Called after the vue instance is initialized |
| beforeMount | Called before mounting to the DOM tree |
| mounted | Called after mounting to the DOM tree |
| beforeUpdate | Called before data update |
| updated | Called after data update |
| beforeDestroy | Called before the vue instance is destroyed |
| destroyed | Called after the vue instance is destroyed |
3. Learning
base code
Let's first look at the basic code of the case as follows, and then use the following code steps to demonstrate the life cycle function executed by an object in each stage of the process from generation to destruction. Note what the show function does.
<!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);
}
})
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 been compiled.
Add the created hook function to the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
created: function(){
show('vue实例初始化之后',this);
}
})
3.beforeMount：
This stage completes the compilation of the template, but it has not yet been mounted on the page.
Add the hook function to the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeMount: function(){
show('挂载之前',this);
}
})
4.mounted：
At this stage, the template is compiled and mounted on the page, and the page can be displayed.
Add the hook function to the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
mounted: function(){
show('挂载之后',this);
}
})
5.beforeUpdate:
Execute this function before the state 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 rendering of the DOM tree has not been restarted.
First change the data in data:
vm.information = '南极光之夜';
Add the hook function to the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeUpdate: function(){
show('更新之前',this);
}
})
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 the hook function to the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
updated: function(){
show('更新之后',this);
}
})
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();
```
在案例中添加钩子函数：
```javascript
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
beforeDestroy: function() {
show('销毁之前',this);
}
})
8.destroyed：
This phase is called after the vue instance is destroyed, at which point everything indicated by all instances will be unbound, event listeners will be removed, and child instances will be destroyed.
Add the hook function to the case:
var vm = new Vue({
el: '#app',
data: {
information: '北极光之夜。'
},
destroyed: function() {
show('销毁之后',this);
}
})