Vue3生命周期钩子详解

Vue 3 的生命周期钩子函数允许开发者在组件不同阶段执行特定逻辑。与 Vue 2 相比，Vue 3 在 Composition API 中引入了新名称，并废弃了部分钩子。以下是详细说明：

---

一、Vue 3 生命周期阶段与钩子函数

1. 组件创建阶段

• setup()

  • 替代 Vue 2 的 beforeCreate 和 created。

  • 最先执行，用于定义响应式数据、方法等。

  • 无法访问组件实例（this），因为此时实例尚未创建。

2. 挂载阶段

• onBeforeMount()

  • 在组件挂载到 DOM 前触发。

  • 此时模板已编译，但尚未渲染 DOM。

• onMounted()

  • 组件挂载到 DOM 后触发。

  • 常用场景：操作 DOM、发起异步请求、初始化第三方库。

3. 更新阶段

• onBeforeUpdate()

  • 响应式数据变化导致 DOM 更新 前触发。

  • 适合在 DOM 更新前访问旧状态。

• onUpdated()

  • DOM 更新 后触发。

  • 注意：避免在此钩子中修改状态，可能导致无限循环。

4. 卸载阶段

• onBeforeUnmount()

  • 组件卸载 前触发（替代 Vue 2 的 beforeDestroy）。

  • 常用场景：清除定时器、取消网络请求、解绑事件。

• onUnmounted()

  • 组件卸载 后触发（替代 Vue 2 的 destroyed）。

5. 其他钩子

• onErrorCaptured()

  • 捕获子组件传递的错误。

  • 返回 false 可阻止错误向上传播。

• onActivated() / onDeactivated()

  • 配合 <keep-alive> 使用，处理组件缓存与激活。

• onServerPrefetch()

  • 仅限服务端渲染 (SSR)，用于预取数据。

---

二、Options API 与 Composition API 对比

1. Options API（传统写法）

javascript

复制

export default {beforeCreate() { /*...*/ },created() { /*...*/ },beforeMount() { /*...*/ },mounted() { /*...*/ },// 其他钩子...
}

2. Composition API（推荐写法）

需从 vue 显式导入钩子，并在 setup() 中使用：

javascript

复制

import { onMounted, onUnmounted } from 'vue';export default {setup() {onMounted(() => {console.log('组件已挂载');});onUnmounted(() => {console.log('组件已卸载');});}
}

---

三、执行顺序图示

复制

setup() → onBeforeMount() → onMounted() → onBeforeUpdate() → onUpdated() → onBeforeUnmount() → onUnmounted()

---

四、注意事项

1. 避免在 onUpdated 中修改状态：可能引发循环更新。

2. 异步操作与清理：在 onUnmounted 中取消未完成的异步任务。

3. 服务端渲染：使用 onServerPrefetch 预取数据。

4. 组合式函数中的生命周期：可在自定义函数内调用钩子，逻辑更内聚。

---

五、代码示例

javascript

复制

import { ref, onMounted, onUnmounted } from 'vue';export default {setup() {const count = ref(0);// 挂载后启动定时器let timer;onMounted(() => {timer = setInterval(() => {count.value++;}, 1000);});// 卸载前清除定时器onUnmounted(() => {clearInterval(timer);});return { count };}
}

---

六、总结

Vue 3 生命周期通过 Composition API 提供了更灵活的代码组织方式。理解各钩子的触发时机和用途，能帮助开发者高效处理初始化、副作用清理和性能优化。建议结合 TypeScript 和组合式函数，进一步提升代码可维护性。