生命周期

字数: 0 字时长: 0 分钟

简介

Vue3 的生命周期指的是组件从创建、挂载、更新到销毁的整个过程，每个阶段都会触发对应的钩子函数，我们可以在这些钩子中执行自己的逻辑（比如发起请求、操作 DOM、清除定时器等）。

生命周期流程

Vue3 组件的生命周期可以分为四个阶段：

创建阶段：setup() 执行，替代了 Vue2 的 beforeCreate 和 created。
挂载阶段：模板编译完成并插入到页面中。
更新阶段：响应式数据变化，触发组件重新渲染。
卸载阶段：组件从页面中移除。

setup()
  ├── onBeforeMount      → 挂载之前
  ├── onMounted          → 挂载完成
  ├── onBeforeUpdate     → 更新之前
  ├── onUpdated          → 更新完成
  ├── onBeforeUnmount    → 卸载之前
  └── onUnmounted        → 卸载完成

与 Vue2 的对比

Vue2（选项式 API）	Vue3（组合式 API）
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted

注意

在组合式 API 中，生命周期钩子统一加上 on 前缀，并且 Vue2 的 beforeDestroy / destroyed 改名为 onBeforeUnmount / onUnmounted。

组合式 API 写法

生命周期钩子需要从 vue 中导入，并在 setup() 或 <script setup> 中同步注册。

vue

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

onBeforeMount(() => {
  console.log("组件挂载之前");
});

onMounted(() => {
  console.log("组件挂载完成，可以操作 DOM 了");
});

onBeforeUpdate(() => {
  console.log("数据更新之前");
});

onUpdated(() => {
  console.log("数据更新完成");
});

onBeforeUnmount(() => {
  console.log("组件卸载之前，清除定时器等副作用");
});

onUnmounted(() => {
  console.log("组件卸载完成");
});
</script>

选项式 API 写法

Vue3 也兼容 Vue2 的选项式写法，钩子名称不带 on 前缀。

vue

<script>
export default {
  beforeMount() {
    console.log("组件挂载之前");
  },
  mounted() {
    console.log("组件挂载完成");
  },
  beforeUpdate() {
    console.log("数据更新之前");
  },
  updated() {
    console.log("数据更新完成");
  },
  beforeUnmount() {
    console.log("组件卸载之前");
  },
  unmounted() {
    console.log("组件卸载完成");
  },
};
</script>

常用场景

onMounted：发起接口请求、操作 DOM、初始化第三方库（图表、地图等）。
onBeforeUnmount：清除定时器、解绑事件监听、取消未完成的请求。

vue

<script setup>
import { onMounted, onBeforeUnmount } from "vue";

let timer = null;

onMounted(() => {
  timer = setInterval(() => {
    console.log("每秒执行一次");
  }, 1000);
});

onBeforeUnmount(() => {
  // 组件卸载前清除定时器，防止内存泄漏
  clearInterval(timer);
});
</script>

最后更新于: 2026/8/5 14:30:00

生命周期 ​

生命周期流程 ​

与 Vue2 的对比 ​

组合式 API 写法 ​