Vue的生命周期

目录

一、Vue生命周期简介

 二、各阶段的生命周期钩子

1、初始化阶段

2、实例挂载阶段 

3、 数据更新阶段

4、销毁阶段 

---

一、Vue生命周期简介

       vue的生命周期大致分为四个过程，分别是创建过程、挂载过程、更新过程、销毁过程，对应 8 个生命周期钩子函数，分别是 beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestory、destoryed。生命周期就是指 vue实例从创建到销毁所经历的这一系列过程。

 二、各阶段的生命周期钩子

1、初始化阶段

• beforeCreate：此时生命周期、vue实例的挂载目标 el 和 data 都还未初始化，不能访问data、computed、watch、methods上的数据和方法
• created：此时生命周期、data都已初始化完成，可以访问data、computed、watch、methods上的数据和方法；但vue实例的挂载目标 el 还未初始化完成，所以不能访问dom元素。

2、实例挂载阶段 

• beforeMount：在dom节点被挂载之前被调用，挂载前模板编译完成,此时 el 还没有挂载 , el还没有挂载，data目前可见
• mounted：此时vue实例的挂载目标 el 已经挂载到文档中，可进行dom操作（但子组件可能还未挂载完成，可通过 this.$nextTick(() => {}) 访问子组件）

3、 数据更新阶段

• beforeUpdate：此生命周期在数据更新时调用，此时dom节点还未更新，可访问更新之前的dom元素
• updated：此时dom节点都已更新，可进行dom操作（同mounted一样，此时子组件可能还未挂载完成），但我们应避免在此期间更改状态，若要相应状态改变，最好使用computed和watch代替

4、销毁阶段 

• beforeDestory：实例销毁之前调用，此时实例仍然完全可用；此时会做一些监听的移除、定时器的移除、事件的解绑操作
• destoryed：实例销毁之后调用，此时数据和视图的关系将会断开