[TOC]

# Vue 3 的生命周期

Vue 3 的生命周期钩子与 Vue 2 类似，但部分名称有所调整，并引入了 Composition API 的新写法。以下是完整的生命周期钩子说明及使用方式：

# 1. Vue 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() → onBeforeMount → onMounted
2. 数据更新 onBeforeUpdate → onUpdated
3. 组件卸载 onBeforeUnmount → onUnmounted

生命周期流程图：

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

# 4. 关键注意事项

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