Vue生命周期
- 一、是什么
- 二、Vue2生命周期
- 三、Vue2生命周期整体流程
- 四、Vue3生命周期
一、是什么
Vue中的实例从创建到销毁的过程就是生命周期,即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程
二、Vue2生命周期
Vue2生命周期总共可以分为8个阶段:创建前后,载入前后,更新前后,销毁前销毁后,以及一些特殊场景的生命周期
三、Vue2生命周期整体流程
- 组件实例创建之前beforeCreate,初始化vue实例
- 组件实例已经创建created,可调用methods中的方法,访问和修改data数据
- 组件挂载到实例之前beforeMount,这个阶段只有虚拟dom
- 组件挂载到实例之后mounted,这个阶段才有真实dom
- 组件数据更新之前beforeUpdate,这个阶段的数据是被渲染在模板上的初始数据
- 组件数据更新之后updated,这个阶段的数据是更新后的数据
- 组件实例销毁之前beforeDestroy,vue实例被销毁之前
- 组件实例销毁之后destroyed,vue实例被完全销毁
四、Vue3生命周期
-
在 Vue 3 中,生命周期钩子的名称和行为有一些变化
- 组件实例创建阶段(beforeCreate与created)用setup代替
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
-
新增的生命周期钩子
- onRenderTracked:当渲染触发的依赖追踪时调用,可以用来调试和性能分析
- onRenderTriggered:当渲染触发的依赖更改时调用,可以用来调试和性能分析