![3ed8b694280459a94a6605fa368d3458.png](https://i-blog.csdnimg.cn/blog_migrate/8f41329271aeec3bf4ed831827e9eea1.png)
一、概述
每个Vue.js实例在创建时都要经过一系列初始化,例如设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。
同时,也会运行一些叫作生命周期钩子的函数,给在不同阶段添加自定义代码的机会。
二、生命周期
Vue.js生命周期可以分为4个阶段:初始化阶段、模板编译阶段、挂载阶段、卸载阶段。
初始化阶段
new Vue()到created之间的阶段叫作初始化阶段。
这个阶段的主要目的是在Vue.js实例上初始化一些属性、事件以及响应式数据,如props、methods、data、computed、watch、provide和inject等。
模板编译阶段
在created钩子函数与beforeMount钩子函数之间的阶段是模板编译阶段。
这个阶段的主要目的是将模板编译为渲染函数,只存在于完整版中。如果在只包含运行时的构建版本中执行new Vue(),则不会存在这个阶段。
当使用vue-loader或vueify时,*.vue文件内部的模板会在构建时预编译成Javascript,所以最终打好的包里是不需要编译器的,用运行时版本即可。由于模板这时已经预编译成了渲染函数,所以在生命周期中并不存在模板编译阶段,初始化阶段的下一个生命周期直接是挂载阶段。
挂载阶段
beforeMount钩子函数到mounted钩子函数之间的是挂载阶段。
在这个阶段,Vue.js会将其实例挂载到DOM元素上,通俗地讲,就是讲模板渲染到指定的DOM元素中。
在挂载的过程中,Vue.js会开启Watcher来持续追踪依赖的变化。
在已挂载状态下,Vue.js仍会持续追踪状态的变化。当数据(状态)发生变化时,Watcher会通知虚拟DOM重新渲染视图,并且会在渲染视图前出发beforeUpdate钩子函数,渲染完毕后触发updated钩子函数。
通常,在运行时的大部分时间下,Vue.js处于已挂载状态,每当状态发生变化时,Vue.js都会通知组件使用虚拟DOM重新渲染,也就是常说的响应式。这个状态会持续到组件被销毁。
卸载阶段
应用调用vm.$destroy
方法后,Vue.js的生命周期会进入卸载阶段。
**vm.$destroy
**我们在上一篇文章中实现过:学习vue源码(15)手写destroy方法
在这个阶段,Vue.js会将自身从父组件中删除,取消实例上所有依赖的追踪并且移除所有的事件监听器。
小结
生命周期可以在整体上分为两部分
1、第一部分是初始化阶段、模板编译阶段与挂