Recently, I was looking at the life cycle of Vue, and I sorted out the various processes and
observed the rendering of the virtual dom tree and the real dom tree at each stage. Each component or instance will experience a complete life cycle, which is roughly divided into three in total. Phases: initialization, running, destruction
Let me explain step by step:
- After the instance and component are created through new Vue(), the event and life cycle will be initialized, and then the beforeCreate hook function will be executed. At this time, the data has not been mounted yet, it is just an empty shell and cannot access the data and the real dom. Generally do not operate
- Mount the data, bind events, etc., and then execute the created function. At this time, the data can be used, and the data can also be changed. Synchronously changing the data will not trigger the updated function. Generally, you can get the initial data here. Do asynchronous ajax, bind the initialization event
- Next, start to find the template corresponding to the instance or component, compile the template as the virtual dom and put it into the render function to prepare for rendering, and then execute the beforeMount hook function. In this function, the virtual dom has been created and will be rendered soon. You can also use it here. Changing the data will not trigger updated. This is the last opportunity to change the data before rendering. It will not trigger other hook functions. Generally, you can get the initial data here.
- Next, start to render, render the real dom, and then execute the mounted hook function. At this point, the component has appeared on the page, the data and the real dom have been processed, and the events have been mounted. You can operate the real dom here. Wait for something...
- When the data of the component or instance is changed, beforeUpdate will be executed immediately, and then the virtual dom mechanism of vue will rebuild the virtual dom with the previous virtual dom tree and re-render it after comparing it with the previous virtual dom tree. Generally, nothing is done.
- When the update is complete, execute updated, the data has been changed, and the dom is re-rendered. You can operate the updated dom
- After calling the $destroy method in a certain way, immediately execute beforeDestroy, and generally do some aftermath here, such as clearing the timer, clearing non-instruction-bound events, etc.
- Component data binding, monitoring... After removing, only the dom shell is left. At this time, execute destroyed, and you can do the aftermath here.
Three stages
The life cycle hook function of a component can be roughly divided into three stages: initialization , running, and destruction
Initialization phase ;
beforeCreate() created (data can be obtained) beforeMount (render) mounted
Running phase:
beforeUpdate updated
Destroy phase:
beforeDestroy destroyed
The next step is the corresponding code phase. Let's take a look at the code example here:
/*
组件从创建到销毁的一系列过程叫做组件的声明周期。
vue在整个生命周期里面提供了一些函数，可以在内部实现一些业务逻辑，
并且这些函数会在一些特定的场合下去执行。（在生命周期的某一个时刻进行触发）
组件的声明周期钩子函数大致可以分为三个阶段： 初始化、运行中、销毁
初始化阶段；beforeCreate（） created（可以获取数据） beforeMount （render） mounted
运行中阶段：beforeUpdate updated
销毁阶段： beforeDestroy destroyed
*/
//1.一个组件或者实例的什么周期都是从new开始的。
//2.实例化之后，内部就会做一些初始化事件与生命周期相关的配置
Vue.component("my-component",{
template:"#my-component",
data(){
return {
msg:"hello"
}
},
//3.这个钩子函数初始化阶段就会触发执行
//数据获取不到，并且真实dom也获取不到
beforeCreate(){
console.log("beforeCreate...")
console.log(this.msg,document.getElementById("title"))
},
//4.created钩子函数代表数据已经挂载完毕，但是真实dom节点还是没有渲染出来。
//通常在这个钩子函数里面，我们可以进行初始化的一些事件绑定与进行ajax异步请求
//注意：在这个钩子函数里面，如果同步的更改数据的话，是不会影响到运行时钩子函数执行
created(){
console.log("created...")
console.log(this.msg,document.getElementById("title"))
},
//5.接下来的过程，就是组件或者实例去查找各自的模板，将其编译成虚拟dom
//6.beforeMount代表真实dom马上要被渲染出来了，但是页面中还没有生成真实dom
//beforeMount与created钩子函数用法基本一致，也可以进行初始化事件绑定与ajax请求
beforeMount(){
console.log("beforeMount...")
console.log(this.msg,document.getElementById("title"))
},
//生成好了虚拟dom了，然后在render函数里面将虚拟dom进行初始化渲染成真实dom树
//相当于在render函数里面做了一个初始化渲染的操作
// render(){
// console.log("render...")
// }
//7.mounted钩子函数是初始化阶段的最后一个钩子函数
//数据已经挂载完毕了，并且真实的dom元素也已经生成好了
//一般可以进行一些实例化操作 --> 拖拽
mounted(){
console.log("mounted...")
console.log(this.msg,document.getElementById("title"))
}
})
new Vue().$mount("#app");
Finally with our life cycle flowchart
The old man's manuscript, only passed on to the destined:
Life cycle flow chart (old man hand-painted cheats HD version) gitee.com
Through this flowchart, everyone will more clearly see the role and effect of Vue's life cycle hooks, so the hook functions at each stage are very important, and we need to continue to consolidate and enrich them in the project.