Vue生命周期解析

2020-11-10 216 阅读2分钟

1.创建阶段

beforeCreate 实例未创建，调用不到data数据
created 实例创建完成后调用，这个过程已完成了数据及方法（props,data,methods）的初始化，均可以被访问得到，但尚未挂载。这个过程可以修改数据，这也是渲染之前修改数据的机会
在嵌套组件中，会先执行父组件的beforeCreate, created方法，进而执行子组件的beforeCreate, created方法。

2.挂载阶段

beforeMount (实例创建完)但未挂载到el上,获取的是**vue启动前的最初DOM **
mounted (实例创建完)并且实例挂载到el上后调用，获取的是vue启动后的DOM(执行一次，之后的vue数据变化触发updated)
在嵌套组件中，销毁挂载的时候，会先执行父组件的beforeMount方法，进而执行子组件的beforeMount方法，在子组件的mounted方法执行完毕后，再执行父组件的mounted方法

3.更新阶段

beforeUpdate 获取数据更新前的原DOM
updated 获取数据更新后的DOM；
挂载之后，vue的数据改变会引起页面视图的改变，此时触发的是updated事件，而不是mounted(mounted只会在挂载实例的时候触发调用一次)
应用：获取调试前后的DOM

4.销毁阶段

beforeDestroy 实例销毁之前调用
destroyed 实例销毁之后调用
在父组件中可以使用v-if来控制实例的销毁和创建
**在嵌套组件中，销毁组件的时候，会先执行父组件的beforeDestroy方法，进而执行子组件的beforeDestroy方法，在子组件的destroyed方法执行完毕后，再执行父组件的destroyed方法 **
应用:主要在实例销毁之前解绑一些使用addEventListener 监听的事件等