Vue 3 ：生命周期钩子详解
生命周期钩子概述
生命周期钩子是在 Vue 组件各个关键阶段调用的特殊函数，允许开发者在特定时刻执行自定义逻辑。
生命周期阶段划分
Vue 3 组件的生命周期可分为四个主要阶段：
- 创建阶段 - 组件实例化与响应式系统初始化
- 挂载阶段 - 组件模板编译与 DOM 挂载
- 更新阶段 - 响应式数据变化与 DOM 更新
- 卸载阶段 - 组件销毁与资源清理
生命周期执行流程
组件创建↓
setup() 执行↓
onBeforeMount() → 模板编译完成，挂载前↓
onMounted() → 组件已挂载，可访问 DOM↓
onBeforeUpdate() → 数据变更，DOM 更新前↓
onUpdated() → DOM 更新完成↓
onBeforeUnmount() → 组件卸载前，资源清理↓
onUnmounted() → 组件已卸载
核心生命周期钩子
创建阶段
setup() - Composition API 入口
import { ref, reactive } from 'vue'export default {setup() {// 初始化响应式数据const count = ref(0)const state = reactive({ message: 'Hello' })// 返回模板中可用的数据和方法return { count, state }}
}
- 执行时机：组件实例创建之初
- 主要用途：定义响应式数据、计算属性、方法等
- 注意事项：此阶段无法访问组件实例（this）
挂载阶段
onBeforeMount() - 挂载前回调
import { onBeforeMount } from 'vue'setup() {onBeforeMount(() => {console.log('组件即将挂载到 DOM')// 此时模板已编译，但尚未挂载})
}
onMounted() - 挂载完成回调
import { onMounted, ref } from 'vue'setup() {const container = ref(null)onMounted(() => {console.log('组件已挂载到 DOM')// 可访问 DOM 元素console.log(container.value)// 适合初始化第三方库、发起数据请求initializeThirdPartyLibrary()})return { container }
}
更新阶段
onBeforeUpdate() - 更新前回调
import { onBeforeUpdate } from 'vue'setup() {onBeforeUpdate(() => {console.log('数据已变更，DOM 即将更新')// 可获取更新前的 DOM 状态})
}
onUpdated() - 更新完成回调
import { onUpdated } from 'vue'setup() {onUpdated(() => {console.log('DOM 更新已完成')// 可执行依赖于新 DOM 的操作})
}
卸载阶段
onBeforeUnmount() - 卸载前回调
import { onBeforeUnmount } from 'vue'setup() {let timerId = nullonBeforeUnmount(() => {console.log('组件即将卸载')// 清理资源：定时器、事件监听器、网络请求等if (timerId) clearInterval(timerId)window.removeEventListener('resize', handleResize)})
}
onUnmounted() - 卸载完成回调
import { onUnmounted } from 'vue'setup() {onUnmounted(() => {console.log('组件已完全卸载')// 执行最终清理工作})
}
总结
Vue 3 的生命周期钩子为开发者提供了精确控制组件行为的能力：
- 创建阶段：使用
setup()初始化组件状态 - 挂载阶段：在
onMounted中执行 DOM 操作和数据初始化 - 更新阶段：通过
onBeforeUpdate和onUpdated响应数据变化 - 卸载阶段：在
onBeforeUnmount中确保资源正确释放
掌握这些生命周期钩子的正确使用方法，能够帮助开发者构建出更加稳定、高效的 Vue 应用程序。