May 30, 2021 Article blog
组件的生命周期分为四个阶段:
- create(创建)
- mount(挂载)
- update(更新)
- destroy(销毁)
What are the hook functions? How do you use it?
In combination with the diagram, the following diagram shows the life cycle of the components: (each of which is explained in detail below)
1. BeforeCreate is called before the data observation (data observer) and event/watcher event configurations are initiated, and if you access the data data object inside the beforeCreate function, it is not accessible
<body>
<div id="app">
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'123'
},
watch:{
msg:function(){
console.log("我变了");
}
},
beforeCreate(){
console.log("创建组件data对象之前自动触发~~~");
console.log("beforeCreate",this.msg);
}
})
</script>
</body>
Result: The value of msg cannot be obtained in the beforeCreate function
2. created
<body>
<div id="app">
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'123'
},
watch:{
msg:function(){
console.log("我变了");
}
},
beforeCreate(){
console.log("创建组件data对象之前自动触发~~~");
console.log("beforeCreated",this.msg);
},
created:function(){
console.log("创建组件data对象之后自动触发~~~");
this.msg=100000;
console.log("created",this.msg);
console.log("li数量:",document.getElementsByTagName("li").length);
console.log("p数量:",document.getElementsByTagName("p").length);
}
})
</script>
Result: In the created function we succeeded in getting and changing the value of msg. A nd after the data is changed, the method in the watch property is started. You can also get the DOM (p element) that was loaded directly on the original HTML, but you can't get the DOM generated by the mount template (ex: v-for loop through Vue.list to generate the li element)
Note: The create phase has not yet created a virtual dom
3.beforeMount
beforeMount:function(){
console.log(this.$el);
console.log("li数量:",document.getElementsByTagName("li").length);
}
outcome:
4.mounted
mounted:function(){
console.log(this.$el);
console.log("li数量:",document.getElementsByTagName("li").length);
}
Result: The same code, placed in the beforeMount and mounted functions, results are completely different
During the update phase, the virtual dom listens for data changes and updates the dom at any time
5. The hook function of beforeUpdate is executed when the data changes
6. Updated virtual dom re-rendered after execution
7.beforeDestroy instances are called before they are destroyed. A t this step, the instance is still fully available
8.destroyed Vue instances are called after destruction. After the call, everything indicated by the Vue instance is unbound, all event listeners are removed, and all child instances are destroyed.
<body>
<div id="app">
<input type="text" v-model="msg">
<ul>
<li v-for="(elem,index) of list" :key="index">{{elem}}</li>
</ul>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<h1>数量:{{count}}</h1>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:'123',
list:['a','b','c'],
count:0
},
watch:{
msg:function(){
console.log("我变了");
}
},
beforeCreate(){
console.log("创建组件data对象之前自动触发~~~");
console.log("beforeCreated",this.msg);
},
created:function(){
console.log("创建组件data对象之后自动触发~~~");
this.msg=100000;
console.log("created",this.msg);
console.log("li数量:",document.getElementsByTagName("li").length);
console.log("p数量:",document.getElementsByTagName("p").length);
},
beforeMount:function(){
console.log(this.$el);
console.log("li数量:",document.getElementsByTagName("li").length);
},
mounted:function(){
console.log(this.$el);
console.log("li数量:",document.getElementsByTagName("li").length);
setInterval(()=>{
this.count++;
},1000)
},
beforeUpdate(){
console.log("更新组件的data变量前自动触发~~~")
},
updated(){
console.log("更新组件的data变量后自动触发~~~");
if(this.count>3){
this.$destroy();
}
},
beforeDestroy(){
console.log("销毁当前组件前自动触发~~~")
},
destroyed(){
console.log("销毁组件后自动触发~~~");
}
})
</script>
</body>
outcome:
That's the life cycle of a component