Recently I was learning Vue, and I came into contact with Vue's life cycle hooks. I watched the video and Baidu related some, so let’s take a note here~
The life cycle function is a function that the vue instance will automatically execute at a certain point in time
Article Directory
Life cycle hooks involved
Put on the official life cycle diagram:
there are 8 life cycle hooks involved in the diagram
| Lifecycle hook | Triggered behavior | Operational examples at this stage |
|---|---|---|
| beforeCreate | The mount element $el and data data of the vue instance are both undefined and have not been initialized. | You can add a loading event here |
| created | The data of the vue instance is available, $el is not yet, DOM is not generated | Finish loading, and do some initialization to realize function self-execution |
| beforeMount | The $el and data of the vue instance are initialized, but it is still a virtual dom node, and the page has not been rendered yet. Occupy the pit first, and then render the value when it is mounted later. | |
| mounted | The vue instance is mounted, the virtual DOM becomes the real DOM | Initiate a back-end request here, get the data back, and do something with the routing hook |
| beforeUpdate | The data in data has changed and it is called before re-rendering | |
| updated | The data in data is changed, call after re-rendering | When the data is updated, do some processing (you can also use watch to observe here) |
| beforeDestroy | Called before component destruction | Give the user a prompt, such as "Are you sure to delete xxx?" |
| destroyed | Called after the component is destroyed, the vue instance releases the event listener and the binding with the dom (no response), but the DOM node still exists | The current component has been deleted, clear related content |
In addition to these 8 there are other 2
| activated | Use keep-alive, which is called when the component is activated, and the function in the hook is executed every time it enters |
|---|---|
| deactivated | Use keep-alive, called when the component is removed |
Combine code to understand hook functions
Attach the code of the boss, which is concise and easy to understand:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue实例的生命周期钩子</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<p>{
{message}}</p>
<input type="button" @click="change" value="更新数据" />
</div>
<script>
// 生命周期函数就是vue实例在某一个时间点会自动执行的函数
var app = new Vue({
el:'#app',
data: {
message : "Vue实例的生命周期钩子"
},
methods: {
change(){
this.message = '更新快更新'
}
},
beforeCreate: function () {
console.group('beforeCreate 创建前状态===============》');
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);//undefined
},
created: function () {
console.group('created 创建完毕状态===============》');
console.log("%c%s", "color:red","el : " + this.$el); //undefined
console.log("%c%s", "color:green","data : " + this.$data); //[object Object] => 已被初始化
console.log("%c%s", "color:green","message: " + this.message); //Welcome Vue => 已被初始化
},
beforeMount: function () {
console.group('beforeMount 挂载前状态===============》');
console.log("%c%s", "color:green","el : " + (this.$el)); //已被初始化
console.log(this.$el); // 当前挂在的元素
console.log("%c%s", "color:green","data : " + this.$data); //已被初始化
console.log("%c%s", "color:green","message: " + this.message); //已被初始化
},
mounted: function () {
console.group('mounted 挂载结束状态===============》');
console.log("%c%s", "color:green","el : " + this.$el); //已被初始化
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data); //已被初始化
console.log("%c%s", "color:green","message: " + this.message); //已被初始化
},
beforeUpdate: function () {
alert("更新前状态");
console.group('beforeUpdate 更新前状态===============》'); //这里指的是页面渲染新数据之前
console.log("%c%s", "color:green","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data);
console.log("%c%s", "color:green","message: " + this.message);
alert("更新前状态2");
},
updated: function () {
console.group('updated 更新完成状态===============》');
console.log("%c%s", "color:green","el : " + this.$el);
console.log(this.$el);
console.log("%c%s", "color:green","data : " + this.$data);
console.log("%c%s", "color:green","message: " + this.message);
},
beforeDestroy: function () {
console.group('beforeDestroy 销毁前状态===============》');
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 销毁完成状态===============》');
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>
</body>
</html>
The main thing is to check the printed order and results! ! ! effect:
In addition, in the red box, we can find that el is still {
{message}}, here is the applied Virtual DOM (Virtual Dom) technology, the page has not been rendered yet, so the pit is occupied first. When mounted later, render the value in.
When Vue finds that the data in data has changed, it will trigger the re-rendering of the corresponding component, and call the beforeUpdate and updated hook functions successively.
注意BeforeUpdate refers to the trigger before the data in the view layer changes, not before the data in the data changes. Because Vue is data driven. Pay attention to the pop-up window to find it easily.
The destroyed hook function must pay special attention to: after the destroy method is executed, the change to the data will no longer trigger the periodic function. At this time, the Vue instance has removed the event monitoring and the binding to the dom, but the dom structure is still exist. Therefore, for the notification component displayed in real time, we must manually removeChild() to delete the node before it is destroyed; otherwise, the DOM node still exists, which affects the performance of the browser.
注意：Do not use arrow functions on life cycle hooks. If the life cycle uses arrow functions, then this will point to the window instead of the current Vue instance
Finally, attach a reference link:
https://www.cnblogs.com/xiaobaibubai/p/8383952.html
https://blog.csdn.net/qq_35585701/article/details/81216704