[TOC]

# Vue 3 的生命周期

Vue 3 的生命周期钩子与 Vue 2 类似，但部分名称有所调整，并引入了 Composition API 的新写法。

# 1. 介绍

# 1.1 Vue2 和 Vue3 生命周期对比和介绍

生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁，每个阶段都有两个钩子，一前一后。

Vue2的生命周期

创建阶段：beforeCreate、created

挂载阶段：beforeMount、mounted

更新阶段：beforeUpdate、updated

销毁阶段：beforeDestroy、destroyed

Vue3的生命周期

创建阶段：setup

挂载阶段：onBeforeMount、onMounted

更新阶段：onBeforeUpdate、onUpdated

卸载阶段：onBeforeUnmount、onUnmounted

常用的钩子：onMounted(挂载完毕)、onUpdated(更新完毕)、onBeforeUnmount(卸载之前)

每个钩子介绍：

# 1.2 执行顺序

1. 组件初始化 setup() → onBeforeMount → onMounted
2. 数据更新 onBeforeUpdate → onUpdated
3. 组件卸载 onBeforeUnmount → onUnmounted

生命周期流程图：

初始化 → setup()
       ↓
beforeMount → 生成虚拟 DOM → 挂载真实 DOM → mounted
       ↓
数据变化 → beforeUpdate → 重新渲染 → updated
       ↓
卸载前 → beforeUnmount → 移除 DOM 和事件 → unmounted

# 1.3生命周期图示

图片来源

# 2. 使用方式

# 2.1 Composition API（推荐）

<script setup lang="ts">
  import { onMounted, onUnmounted } from 'vue';
  onMounted(() => {
    console.log('组件已挂载');
    // 发起数据请求或操作 DOM
  });
  onUnmounted(() => {
    console.log('组件已卸载');
    // 清理定时器或取消请求
  });
</script>

<!-- vue2形式 -->
<script lang="ts">
  import { onMounted, onUnmounted } from 'vue';
  export default {
    setup() {
      onMounted(() => {
        console.log('组件已挂载');
        // 发起数据请求或操作 DOM
      });
      return {};
    }
  };
</script>

# 2.2 选项式 API（传统写法）

与 Vue 2 类似，但钩子名称需调整：

export default {
  beforeMount() {
    console.log('beforeMount');
  },
  mounted() {
    console.log('mounted');
  },
  beforeUnmount() {
    console.log('beforeUnmount');
  },
  unmounted() {
    console.log('unmounted');
  }
};

# 3. 关键注意事项

1. setup() 替代 beforeCreate 和 created 所有初始化逻辑应放在 setup() 中，此时组件实例尚未完全创建，但可以访问 props 和 context。
2. 避免在 updated 中修改数据 可能导致无限循环，应使用计算属性或侦听器替代。
3. 异步操作与资源清理 在 onUnmounted 中取消未完成的异步任务（如定时器、网络请求），防止内存泄漏。
4. 调试钩子的使用场景 onRenderTracked 和 onRenderTriggered 用于追踪渲染性能问题，生产环境建议关闭。
5. 如果是迁移 Vue 2 项目，重点关注钩子名称的调整和 setup() 的替代逻辑

# 参考资料

vue3 官方 生命周期文档

vue3 官方 生命周期钩子 API 索引