Vue生命周期

Vue生命周期

1.官方文档

https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA

2.生命周期图示

3.生命周期钩子函数解释

官方文档：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90

01.beforeCreate

​ 在实例初始化之后，进行数据侦听和的和事件/侦听器的配置之前同步调用

02.created

​ 在实例创建完成后被立即同步调用，这时，数据侦听/计算属性/方式/事件的回调函数已配置完毕。但是挂载还没开始。

03.beforeMount

​ 在挂载开始之前被调用，相关的render函数首次被调用

04.mounted

​ **实例被挂载后调用。**但是不能保证所有的子组件也都被挂载完成。

05.beforeUpdate

​ 在数据发生改变后，DOM更新之前被调用

06.updated

​ 在数据更改导致的虚拟DOM重新渲染和更新完毕之后被调用

07.beforeDestroy

​ 实例销毁之前调用。

08.destroyed

​ 实例销毁后调用。

09.路由组件独有的2个钩子
activated 路由组件被激活时触发
deactivated 路由组件被失活时触发

10.nextTick

• 在数据变化后(挂载完成)执行的某个操作，而这个操作需要使用随数据变化而变化的DOM结构的时候，这个操作就需要方法在nextTick()的回调函数中。

• 在vue生命周期中，如果在created()钩子进行DOM操作，也一定要放在nextTick()的回调函数中。

4.Vue3之生命周期函数

• 变化：beforeDestroy()和destroyed()在Vue3中对应beforeUnmount()和Unmounted()
• setup()表示钩子beforeCreate()和created()