Vue3 的生命周期：从 Composition API 视角看

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

在 Vue3 中，生命周期钩子函数的用法有所变化，以适应 Composition API 的新特性。生命周期钩子现在作为 on 前缀的函数提供，例如 onMounted、onUpdated 等。

生命周期钩子

以下是 Vue3 中可用的主要生命周期钩子及其对应的 Composition API 函数：

• 创建阶段

  • beforeCreate -> 使用 setup() 替代
  • created -> 使用 setup() 替代

• 挂载阶段

  • beforeMount -> onBeforeMount
  • mounted -> onMounted

• 更新阶段

  • beforeUpdate -> onBeforeUpdate
  • updated -> onUpdated

• 卸载阶段

  • beforeUnmount (Vue3 中替代了 beforeDestroy)
  • unmounted (Vue3 中替代了 destroyed)

• 错误处理

  • errorCaptured -> onErrorCaptured

生命周期钩子的使用示例

<template>
<div>{{ message }}</div>
</template><script>
import { ref, onMounted, onUpdated, onBeforeUnmount } from 'vue';export default {
setup() {
const message = ref('Hello, Vue3!');// 组件挂载后执行
onMounted(() => {
console.log('Component is mounted!');
});// 组件更新后执行
onUpdated(() => {
console.log('Component is updated!');
});// 组件卸载前执行
onBeforeUnmount(() => {
console.log('Component is about to be unmounted!');
});return { message };
}
};
</script>

在 Vue3 中，生命周期钩子函数通常在 setup 函数内部调用，并且不需要像 Vue2 那样在选项对象中注册。这些钩子函数提供了一种在组件的不同阶段执行代码的方式，例如初始化数据、设置订阅、清理资源等。

注意，setup 函数本身在组件实例化时立即执行，相当于 Vue2 中的 beforeCreate 和 created 钩子的结合。因此，在 setup 函数中进行的操作通常对应于这两个生命周期阶段。