🥦 Vue 生命周期
2025-01-22 08:19:30 672 字
This post is also available in English and alternative languages.
1. 什么是生命周期
通俗的理解即：“从生到亡”。
在 Vue 中组件从创建到销毁的过程就是生命周期。即指从创建、初始化数据、编译模板、挂载Dom -> 渲染、更新 -> 渲染、卸载等一系列过程。
对于我这个本职后端开发而言，为了快速理解，我会将其认为是类似于 Spring 中托管的 Bean 的生命周期管理。
在 Spring 中，Bean 的创建、初始化、使用和销毁都由 Spring 容器负责，而在 Vue 中，组件的创建、挂载、更新和销毁都由 Vue 框架负责。
2. 生命周期钩子
它指的是 Vue 组件在其生命周期中不同阶段触发的回调函数。这些钩子函数允许你在组件的创建、更新、销毁等关键时间点执行特定的逻辑。
同样套用 Spring 中托管的 Bean 管理，「钩子」可以理解为某个时间点执行特定逻辑的回调方法。
| Vue 生命周期 | 描述 |
|---|---|
| beforeCreate | 组件实例被创建之初 |
| created | 组件实例已经完全创建 |
| beforeMount | 组件挂载之前 |
| mounted | 组件挂载到实例上去之后 |
| beforeUpdate | 组件数据发生变化，更新之前 |
| updated | 组件数据更新之后 |
| beforeDestroy | 组件实例销毁之前 |
| destroyed | 组件实例销毁之后 |
| activated | keep-alive 缓存的组件激活时 |
| deactivated | keep-alive 缓存的组件停用时调用 |
| errorCaptured | 捕获一个来自子孙组件的错误时被调用 |
3. 不同版本的比较
Vue 2 的生命周期写法名称是 Options API（选项式 API ），Vue 3 新的生命周期写法名称是 Composition API（组合式 API ）。
| 2.x生命周期 | 3.x生命周期 | 执行时机 |
|---|---|---|
| beforeCreate | setup | 组件创建前执行 |
| created | setup | 组件创建后执行 |
| beforeMount | onBeforeMount | 组件挂载到节点上之前执行 |
| mounted | onMounted | 组件挂载完成后执行 |
| beforeUpdate | onBeforeUpdate | 组件更新之前执行 |
| updated | onUpdated | 组件更新完成之后执行 |
| beforeDestroy | onBeforeUnmount | 组件卸载之前执行 |
| destroyed | onUnmounted | 组件卸载完成后执行 |
| errorCaptured | onErrorCaptured | 当捕获一个来自子孙组件的异常时激活钩子函数 |
可以看到 Vue 2 生命周期里的 beforeCreate 和 created ，在 Vue 3 里已被 setup 替代。
在 Vue 3 的 Composition API 写法里，每个生命周期函数都要先导入才可以使用，并且所有生命周期函数统一放在 setup 里运行。
如果需要达到 Vue 2 的 beforeCreate 和 created 生命周期的执行时机，直接在 setup 里执行函数即可。