Detailed Explanation of Vue Life Cycle and Hook Function
Vue life cycle introduction:
The internal structure of the component is different in each stage, so generally specific hooks do specific things, such as Ajax to obtain data can be in the mounted stage. The entire process from the creation of the Vue instance to the final destruction of the instance is called the life cycle of VUE. In this life cycle, the following things happen: from the creation of the Vue instance, first the Vue instance is created, and then the data initialization begins. , Compile template, mount dom, render dom, update object properties, render dom, unbind and destroy.
VUE lifecycle hooks
Life cycle hooks are also called life cycle time, life cycle functions, and life cycle hooks are all kinds of events that start in the vue life cycle. These events are called life cycle hooks. In the vue life cycle, most of them are divided into four stages , create, hang on, update, destroy, each of these four stages corresponds to two life cycle hooks
1. Create part (create), that is, the vue instance is initialized. Simply put, we have performed this operation in the code var app = new Vue() , and then enter the creation phase of the vue life cycle. In the creation phase, there will be two programmable interfaces provided to us, namely beforeCreate and created. These two interfaces are triggered at the creation stage, but the two interfaces are different. beforeCreate is triggered before created, that is, after the vue instance is initialized, it is triggered before data is read. If you read data at this time The data in it will prompt unfined. created is called after the instance is created. At this time, the data in data has been written, but the dom has not been mounted, so it has not been associated with the page. Next, enter the mounting stage.
Second, the mount phase (mount), this phase is to mount the dom in the page to the instantiated vue object. Simply put, el: '#dom' is executed. There are also two interfaces for us to program at this stage, namely beforemount and mounted. The main difference between these two interfaces is whether or not the dom is mounted on the instance object. beforemount is triggered before mounting and only parses the template. If the innerHTML of the dom that needs to be mounted is output at this time, it will be The template is output as is, and the data is not rendered. mounted is actually on the page where the data in data can be rendered after the dom is mounted. After this phase, it enters the update phase.
Three, the update stage (update), this stage is when the data on the page is updated again after the first load. It also corresponds to the two interfaces beforeupdate and update. The difference between these two interfaces is mainly whether the page dom is rendered or not. When we modify the data in data and trigger beforeupdate after the modification is completed, the attribute value in data is already modified, but the DOM of the page is not rendered. update is to render data to the page. So far, the life cycle of vue has entered the update stage. In normal use, we will often be in the update stage many times, and make various modifications to the data on the page. But in order to meet the requirements of closing unnecessary events and releasing memory, the destruction stage is also required.
Fourth, the destruction phase (destory), after an instance is destroyed, all events bound to the instance will be invalidated, and the listener will also be removed. This phase corresponds to two interfaces beforeDestroy and destroy. deforeDestory is called before the instance needs to be destroyed but has not returned first. At this time, the various events and listeners bound to the instance are still available. destroy is called after the instance is destroyed. At this time, everything in the instance cannot be used, but the data on the page still maintains the data of the last rendering of the page.
Introduction to the Vue life cycle
Several stages described above
Use the code to observe the hook function
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
</head>
<body>
<div id="app">
<p>{
{ message }}</p>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
message : "xuxiao is boy"
},
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)
},
created: function () {
console.group('created 创建完毕状态===============》');
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 挂载前状态===============》');
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 挂载结束状态===============》');
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 更新前状态===============》');
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 更新完成状态===============》');
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 销毁前状态===============》');
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>
create and mounted related
beforecreated: el and data are not initialized
created: data initialization is completed, el is not
beforeMount: el and data initialization are completed
mounted: mounting is complete
In addition, in the red area, we can find that el is still {
{message}}, here It is the applied Virtual DOM (Virtual Dom) technology, which first occupies the pit. The value will be rendered later when mounted.
update related
destroy related
Regarding destruction, it is not very clear yet. We execute the following command in the console to destroy the vue instance. After the destruction is complete, we change the value of the message again, and Vue no longer responds to this action. However, the original generated dom element still exists. It can be understood that after executing the destroy operation, it will no longer be controlled by vue.
Life cycle summary
beforecreate: For example: you can add a loading event here
created: finish loading here, and do some initialization to realize the function self-execution
mounted: initiate a backend request here, get back the data, and do something with the routing hook
beforeDestory: Are you sure to delete XX? destroyed : The current component has been deleted, clear the relevant content