Vue3生命周期钩子详解

news2025/4/19 7:16:37

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()

四、注意事项

避免在 onUpdated 中修改状态：可能引发循环更新。
异步操作与清理：在 onUnmounted 中取消未完成的异步任务。
服务端渲染：使用 onServerPrefetch 预取数据。
组合式函数中的生命周期：可在自定义函数内调用钩子，逻辑更内聚。

五、代码示例

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 };
  }
}