当前位置：首页 > news >正文

Vue 生命周期钩子总结

news 来源：原创 2025/4/29 11:44:06

Vue 生命周期钩子总结

Vue 组件的生命周期钩子允许在组件不同阶段执行自定义逻辑。以下是各阶段的钩子函数及其用途、触发时机和注意事项：

1. 生命周期阶段概览

Vue 组件的生命周期分为四个主要阶段：

创建（Creation）：初始化数据观测、事件等。
挂载（Mounting）：将组件挂载到 DOM。
更新（Updating）：响应数据变化，重新渲染。
销毁（Destruction）：销毁组件实例，清理资源。

2. Vue2 生命周期钩子

钩子函数及触发顺序

钩子函数	触发时机	用途
`beforeCreate`	实例初始化后，数据观测/事件配置前	初始化非响应式变量（如插件配置）
`created`	实例创建完成，数据观测/事件配置完成	发起异步请求、访问响应式数据
`beforeMount`	挂载开始前（编译模板，生成虚拟 DOM）	极少使用
`mounted`	实例挂载到 DOM 后	操作 DOM、初始化第三方库
`beforeUpdate`	数据变化后，重新渲染前	获取更新前的 DOM 状态
`updated`	数据变化导致重新渲染完成	操作更新后的 DOM
`beforeDestroy`	实例销毁前	清理定时器、取消事件监听
`destroyed`	实例销毁后	极少使用

代码示例

export default {beforeCreate() {console.log('beforeCreate：数据未初始化');},created() {console.log('created：数据已初始化，可访问 this.data');},beforeMount() {console.log('beforeMount：模板编译完成，未挂载到 DOM');},mounted() {console.log('mounted：DOM 已挂载');},beforeUpdate() {console.log('beforeUpdate：数据变化，DOM 更新前');},updated() {console.log('updated：DOM 更新完成');},beforeDestroy() {console.log('beforeDestroy：实例销毁前');},destroyed() {console.log('destroyed：实例已销毁');}
}

3. Vue3 生命周期钩子变化

Vue3 保留了 Vue2 的生命周期钩子，但命名略有调整，并新增了 setup 函数作为组合式 API 的入口。

主要变化

钩子函数前缀：
- Vue2 的 beforeDestroy → Vue3 的 beforeUnmount。
- Vue2 的 destroyed → Vue3 的 unmounted。
组合式 API：
- 在 setup() 中使用生命周期钩子需通过 onX 函数（如 onMounted）。

Vue3 钩子对照表

Vue2 钩子	Vue3 钩子	说明
`beforeCreate`	`setup()`	被 `setup()` 替代
`created`	`setup()`	被 `setup()` 替代
`beforeMount`	`onBeforeMount`	挂载前执行
`mounted`	`onMounted`	挂载后执行
`beforeUpdate`	`onBeforeUpdate`	更新前执行
`updated`	`onUpdated`	更新后执行
`beforeDestroy`	`onBeforeUnmount`	卸载前执行
`destroyed`	`onUnmounted`	卸载后执行

Vue3 组合式 API 示例

import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {console.log('mounted：DOM 已挂载');});onUnmounted(() => {console.log('unmounted：实例已销毁');});}
}

4. 常见使用场景

钩子函数	典型场景
`created`	发起 API 请求、初始化非 DOM 相关数据
`mounted`	操作 DOM、初始化图表库（如 ECharts）
`beforeUpdate`	获取更新前的滚动位置
`updated`	数据变化后调整 UI 布局
`beforeUnmount`	清除定时器、取消全局事件监听

5. 注意事项

避免在 created/mounted 中阻塞主线程：
异步操作（如 API 请求）应使用 async/await 或 Promise，避免页面卡顿。
不要在 updated 中修改状态：
可能导致无限循环更新。
Vue3 的 setup 替代了 beforeCreate/created：
所有初始化逻辑应在 setup() 中完成。
SSR 中不可用的钩子：
beforeMount、mounted、beforeUpdate、updated 在服务端渲染时不会执行。

6. 特殊场景钩子

`activated` 和 `deactivated`

用途：用于 <keep-alive> 缓存的组件，监听组件的激活/停用状态。

示例：

export default {activated() {console.log('组件被激活（从缓存中恢复）');},deactivated() {console.log('组件被停用（进入缓存）');}
}

错误处理钩子（Vue2.5+）

errorCaptured：捕获子组件树中的错误，可用于全局错误上报。

export default {errorCaptured(err, vm, info) {console.error('捕获到错误：', err);return false; // 阻止错误继续向上传播}
}

总结

Vue2 生命周期钩子：beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed。
Vue3 主要变化：重命名销毁阶段钩子，引入组合式 API 的 onX 函数。
核心原则：
- 数据初始化在 created（Vue2）或 setup（Vue3）。
- DOM 操作在 mounted 后执行。
- 资源清理在 beforeUnmount/beforeDestroy 中完成。