Vue 3 生命周期钩子

Vue 3 提供了一组 生命周期钩子，允许在组件 创建、挂载、更新、销毁 时执行特定代码。

在 Vue 3 组合式 API 中，生命周期钩子通过 onXxx 形式的函数来使用，并且需要在 setup() 或 <script setup> 语法中调用。

1. Vue 3 生命周期钩子完整流程

Vue 3 生命周期

生命周期流程

  1. 组件创建前
    • setup()：Vue 3 组合式 API 的 入口，比 onBeforeCreate 早执行
    • onBeforeCreate（选项式 API）
  2. 组件创建后
    • onCreated（选项式 API）
  3. 组件挂载前
    • onBeforeMount
  4. 组件挂载后
    • onMounted（DOM 已渲染，适合 API 请求、DOM 操作）
  5. 组件更新前
    • onBeforeUpdate
  6. 组件更新后
    • onUpdated
  7. 组件销毁前
    • onBeforeUnmount
  8. 组件销毁后
    • onUnmounted

2. Vue 3 组合式 API 的生命周期钩子

在 Vue 3 组合式 API 中，生命周期钩子只能在 setup() 或 <script setup> 中调用。

常用生命周期钩子

钩子触发时机适用场景
onBeforeMount组件挂载前在组件挂载到 DOM 之前执行
onMounted组件挂载后DOM 渲染完成后，适合执行 API 请求、DOM 操作
onBeforeUpdate组件更新前数据更新但 DOM 还未更新
onUpdated组件更新后数据和 DOM 都已更新
onBeforeUnmount组件销毁前组件即将从 DOM 中移除时触发
onUnmounted组件销毁后组件已经被销毁，适用于清理定时器、事件监听等

3. 代码示例

（1）基本生命周期钩子

<script setup>
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';

const message = ref('Hello Vue 3');

onMounted(() => {
  console.log('✅ 组件已挂载 (onMounted)');
});

onUpdated(() => {
  console.log('🔄 组件已更新 (onUpdated)');
});

onUnmounted(() => {
  console.log('❌ 组件已销毁 (onUnmounted)');
});
</script>

<template>
  <p>{{ message }}</p>
  <button @click="message += '!'">更新数据</button>
</template>

onMounted 适用于 API 请求，onUpdated 适用于数据变化监听，onUnmounted 适用于清理定时器、取消订阅等。

（2）完整生命周期示例

<script setup>
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue';

const message = ref('Vue 3 生命周期演示');

onBeforeMount(() => {
  console.log('🔹 组件即将挂载 (onBeforeMount)');
});

onMounted(() => {
  console.log('✅ 组件已挂载 (onMounted)');
});

onBeforeUpdate(() => {
  console.log('🔄 数据即将更新 (onBeforeUpdate)');
});

onUpdated(() => {
  console.log('🟢 数据已更新 (onUpdated)');
});

onBeforeUnmount(() => {
  console.log('⚠️ 组件即将销毁 (onBeforeUnmount)');
});

onUnmounted(() => {
  console.log('❌ 组件已销毁 (onUnmounted)');
});
</script>

<template>
  <p>{{ message }}</p>
  <button @click="message += '!'">更新数据</button>
</template>

适用场景：

  • onBeforeMount()：组件 即将渲染，但还未插入 DOM
  • onMounted()：组件 挂载完成，可以操作 DOM、请求 API
  • onBeforeUpdate()：数据变化但 DOM 还未更新
  • onUpdated()：数据和 DOM 都更新完成
  • onBeforeUnmount()：组件 即将销毁，适合清理资源
  • onUnmounted()：组件 完全销毁，适合取消事件监听、清理定时器等

（3）使用 onUnmounted() 清理定时器

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const count = ref(0);
let intervalId = null;

onMounted(() => {
  intervalId = setInterval(() => {
    count.value++;
  }, 1000);
});

onUnmounted(() => {
  clearInterval(intervalId);
  console.log('⏳ 定时器已清理 (onUnmounted)');
});
</script>

<template>
  <p>计数：{{ count }}</p>
</template>

onUnmounted() 确保在组件销毁时清理 定时器，防止 内存泄漏。

（4）Vue 3 watchEffect() 结合生命周期

watchEffect() 在组件 创建时自动执行，并自动监听依赖变化。

<script setup>
import { ref, watchEffect, onUnmounted } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(`当前计数：${count.value}`);
});

onUnmounted(() => {
  console.log('🚀 组件销毁时执行 (onUnmounted)');
});
</script>

<template>
  <button @click="count++">增加计数</button>
</template>

💡 watchEffect() 适用于自动监听多个值的变化，而 watch() 适用于监听特定数据。

4. Vue 3 选项式 API 的生命周期

如果使用 选项式 API，仍然可以使用 Vue 2 的 beforeCreate、created 等钩子：

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 3'
    };
  },
  beforeCreate() {
    console.log('🟡 beforeCreate - 组件创建前');
  },
  created() {
    console.log('🟢 created - 组件创建后');
  },
  beforeMount() {
    console.log('🔹 beforeMount - 组件挂载前');
  },
  mounted() {
    console.log('✅ mounted - 组件挂载后');
  },
  beforeUpdate() {
    console.log('🔄 beforeUpdate - 数据即将更新');
  },
  updated() {
    console.log('🟢 updated - 数据已更新');
  },
  beforeUnmount() {
    console.log('⚠️ beforeUnmount - 组件即将销毁');
  },
  unmounted() {
    console.log('❌ unmounted - 组件已销毁');
  }
};
</script>

<template>
  <p>{{ message }}</p>
  <button @click="message += '!'">更新数据</button>
</template>

Vue 3 推荐 使用 组合式 API（setup() + onMounted()），更清晰、代码复用性更高。

总结

  1. Vue 3 推荐 组合式 API (onMounted()、onUpdated() 等) 来管理生命周期。
  2. onMounted() 适用于 DOM 操作、API 请求，onUnmounted() 适用于 清理定时器、事件监听。
  3. watchEffect() 可在生命周期钩子外监听数据变化。
  4. 选项式 API 仍可使用 beforeCreate、created，但 Vue 3 推荐 组合式 API。

🚀 选择 组合式 API，代码更模块化，适合大型应用！