vue基础（五）-CSDN博客

本文链接：https://blog.csdn.net/l_r_h_/article/details/145554281

Vue 实例在创建、挂载、更新、销毁的过程中会触发一系列的生命周期钩子（Lifecycle Hooks），让开发者可以在不同阶段执行逻辑。

1. Vue 2 生命周期完整流程

生命周期的四个主要阶段

创建阶段（Creation）
挂载阶段（Mounting）
更新阶段（Updating）
销毁阶段（Destruction）

2. Vue 2 生命周期钩子（Hooks）

阶段	生命周期钩子	作用
创建前	`beforeCreate`	组件刚创建，还没有 `data`、`methods`、`computed` 等
创建后	`created`	`data`、`methods` 已初始化，但 `DOM` 还未渲染
挂载前	`beforeMount`	`template` 解析完毕，还未挂载到真实 `DOM` 上
挂载后	`mounted`	组件挂载到 `DOM`，可以操作 `DOM`
更新前	`beforeUpdate`	`data` 变化，DOM 还未更新
更新后	`updated`	`data` 变化，DOM 已更新
销毁前	`beforeDestroy`	组件即将销毁，可清理定时器、解绑事件
销毁后	`destroyed`	组件已销毁，所有子组件也被销毁

3. Vue 2 生命周期示例

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">修改消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello Vue!"
    };
  },
  methods: {
    changeMessage() {
      this.message = "Vue 生命周期演示";
    }
  },
  beforeCreate() {
    console.log("1. beforeCreate - data 还未初始化", this.message); // undefined
  },
  created() {
    console.log("2. created - data 初始化完成", this.message);
  },
  beforeMount() {
    console.log("3. beforeMount - 模板编译完成，尚未挂载");
  },
  mounted() {
    console.log("4. mounted - 组件已挂载到 DOM，可进行 DOM 操作");
  },
  beforeUpdate() {
    console.log("5. beforeUpdate - data 变化，DOM 还未更新", this.message);
  },
  updated() {
    console.log("6. updated - data 变化，DOM 已更新", this.message);
  },
  beforeDestroy() {
    console.log("7. beforeDestroy - 组件即将销毁，可清理定时器等");
  },
  destroyed() {
    console.log("8. destroyed - 组件已销毁");
  }
};
</script>

4. Vue 3 生命周期

Vue 3 依然有生命周期钩子，但使用 setup() 时需要使用 Vue 3 提供的 onXxx 形式的钩子（从 vue 引入）。

Vue 3 生命周期对比

Vue 2	Vue 3 (Composition API)
`beforeCreate`	`setup()` 直接初始化
`created`	`setup()` 直接初始化
`beforeMount`	`onBeforeMount`
`mounted`	`onMounted`
`beforeUpdate`	`onBeforeUpdate`
`updated`	`onUpdated`
`beforeDestroy`	`onBeforeUnmount`
`destroyed`	`onUnmounted`

Vue 3 生命周期示例

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMessage">修改消息</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref("Hello Vue 3!");

    const changeMessage = () => {
      message.value = "Vue 3 生命周期演示";
    };

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

    onUpdated(() => {
      console.log("组件更新了");
    });

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

    return { message, changeMessage };
  }
};
</script>

5. 生命周期使用场景

钩子	适用场景
`beforeCreate`	组件初始化前，可用于 `console.log` 调试
`created`	获取 `data`，初始化 Vuex，发起 `Ajax` 请求
`beforeMount`	在 `DOM` 渲染前执行一些逻辑
`mounted`	获取 `DOM`，初始化 `第三方库`（如 `ECharts`）
`beforeUpdate`	`data` 变化时，执行一些更新前的计算
`updated`	`DOM` 更新后执行操作（如日志记录）
`beforeDestroy`	清除 `setInterval`、解绑 `window` 事件
`destroyed`	组件销毁后的清理操作

6. Vue 生命周期面试题

Q1: `created` 和 `mounted` 有什么区别？

钩子	执行时机	适用场景
`created`	组件实例创建完成，但 `DOM` 还未渲染	可用于获取 `data`、调用 `Vuex`
`mounted`	组件挂载到 `DOM` 后	适用于 `DOM` 操作，如 `ECharts`

📌 如果要操作 DOM，需要在 mounted 中进行。

Q2: `beforeDestroy` 用来做什么？

beforeDestroy 适用于：

清除定时器
解绑全局事件
销毁第三方库

beforeDestroy() {
  clearInterval(this.timer); // 清除定时器
  window.removeEventListener("resize", this.handleResize); // 解绑事件
}