vue基础（五）

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

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

生命周期的四个主要阶段

1. 创建阶段（Creation）
2. 挂载阶段（Mounting）
3. 更新阶段（Updating）
4. 销毁阶段（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); // 解绑事件
}