1、是什么
Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载 等⼀系列过程,称这是Vue的⽣命周期。
2、完整流程
在new Vue实例化后会执行init初始化事件和函数,生成vue实例的整个生命周期
- 调用beforeCreate
再进行数据初始化,会定义data数据,方法以及事件,并给data数据绑定上数据劫持 - 调用Created 可以拿到data下的数据以及methods下的方法
判断当前是否有el参数 没有则 等待调用$mount(el)方法 有则
然后再判断是否有template
如果 有,将template模板转换成render函数 (有reander函数则直接渲染render函数的)
如果没有 则调用外部html作为模板, - 调用beforeMount;
执行render函数,生成一个虚拟dom进行保存(后续数据变化 新老dom对比)然后再将其render渲染成为真实dom 挂载到页面上。 - 调用Mounted;
数据发生变化,(判断当前的_isMounted是不是为ture并且_isDestroyed是不是为false,也就是说,保证dom已经被挂载的情况下,且当前组件并未被销毁,才会走update流程)
- 调用beforeUpdate钩子函数, 一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件
重新生成一个新的虚拟dom,然后会拿这个最新的Vnode和原来的Vnode去做一个diff算法对比,更新render函数的最新数据,再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新 - 调用Updated;
组件摧毁
- beforeDestory 一般在这一步做一些重置的操作,比如清除掉组件中的定时器 和 监听的dom事件
- destoryed;所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁,该钩子在服务端渲染期间不被调用。
3、keep-alive
另外还有 keep-alive
独有的生命周期,分别为 activated
和 deactivated
。用 keep-alive
包裹的组件在切换时不会进行销毁,而是缓存到内存中并执行 deactivated
钩子函数,命中缓存渲染后会执行 activated
钩子函数。
包裹keepalive-alive 父子生命周期
首次 beforedCreate created beforeMounte mounted activated
二次 activated
4、父子组件生命周期顺序
1
父组件生命周期函数beforeCreate()
父组件生命周期函数created()
父组件生命周期函数beforeMount()
子组件生命周期函数beforeCreate()
子组件生命周期函数created()
子组件生命周期函数beforeMount()
子组件生命周期函数mounted()
父组件生命周期函数mounted()
2
父组件生命周期函数beforeUpdate()
子组件生命周期函数beforeUpdate()
子组件生命周期函数updated()
父组件生命周期函数updated()
3
父组件生命周期函数beforeDestroy()
子组件生命周期函数beforeDestroy()
子组件生命周期函数destroyed()
父组件生命周期函数destroyed()
5、父子组件及mixin的生命周期执行顺序
mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted