Vue 生命周期钩子总结

---

Vue 生命周期钩子总结

Vue 组件的生命周期钩子允许在组件不同阶段执行自定义逻辑。以下是各阶段的钩子函数及其用途、触发时机和注意事项：

---

1. 生命周期阶段概览

Vue 组件的生命周期分为四个主要阶段：

1. 创建（Creation）：初始化数据观测、事件等。
2. 挂载（Mounting）：将组件挂载到 DOM。
3. 更新（Updating）：响应数据变化，重新渲染。
4. 销毁（Destruction）：销毁组件实例，清理资源。

---

2. Vue2 生命周期钩子

钩子函数及触发顺序

钩子函数	触发时机	用途
beforeCreate	实例初始化后，数据观测/事件配置前	初始化非响应式变量（如插件配置）
created	实例创建完成，数据观测/事件配置完成	发起异步请求、访问响应式数据
beforeMount	挂载开始前（编译模板，生成虚拟 DOM）	极少使用
mounted	实例挂载到 DOM 后	操作 DOM、初始化第三方库
beforeUpdate	数据变化后，重新渲染前	获取更新前的 DOM 状态
updated	数据变化导致重新渲染完成	操作更新后的 DOM
beforeDestroy	实例销毁前	清理定时器、取消事件监听
destroyed	实例销毁后	极少使用

代码示例

export default {
  beforeCreate() {
    console.log('beforeCreate：数据未初始化');
  },
  created() {
    console.log('created：数据已初始化，可访问 this.data');
  },
  beforeMount() {
    console.log('beforeMount：模板编译完成，未挂载到 DOM');
  },
  mounted() {
    console.log('mounted：DOM 已挂载');
  },
  beforeUpdate() {
    console.log('beforeUpdate：数据变化，DOM 更新前');
  },
  updated() {
    console.log('updated：DOM 更新完成');
  },
  beforeDestroy() {
    console.log('beforeDestroy：实例销毁前');
  },
  destroyed() {
    console.log('destroyed：实例已销毁');
  }
}

---

3. Vue3 生命周期钩子变化

Vue3 保留了 Vue2 的生命周期钩子，但命名略有调整，并新增了 setup 函数作为组合式 API 的入口。

主要变化

1. 钩子函数前缀：
   • Vue2 的 beforeDestroy → Vue3 的 beforeUnmount。
   • Vue2 的 destroyed → Vue3 的 unmounted。
2. 组合式 API：
   • 在 setup() 中使用生命周期钩子需通过 onX 函数（如 onMounted）。

Vue3 钩子对照表

Vue2 钩子	Vue3 钩子	说明
beforeCreate	setup()	被 setup() 替代
created	setup()	被 setup() 替代
beforeMount	onBeforeMount	挂载前执行
mounted	onMounted	挂载后执行
beforeUpdate	onBeforeUpdate	更新前执行
updated	onUpdated	更新后执行
beforeDestroy	onBeforeUnmount	卸载前执行
destroyed	onUnmounted	卸载后执行

Vue3 组合式 API 示例

import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('mounted：DOM 已挂载');
    });

    onUnmounted(() => {
      console.log('unmounted：实例已销毁');
    });
  }
}

---

4. 常见使用场景

钩子函数	典型场景
created	发起 API 请求、初始化非 DOM 相关数据
mounted	操作 DOM、初始化图表库（如 ECharts）
beforeUpdate	获取更新前的滚动位置
updated	数据变化后调整 UI 布局
beforeUnmount	清除定时器、取消全局事件监听

---

5. 注意事项

1. 避免在 created/mounted 中阻塞主线程：
   异步操作（如 API 请求）应使用 async/await 或 Promise，避免页面卡顿。
2. 不要在 updated 中修改状态：
   可能导致无限循环更新。
3. Vue3 的 setup 替代了 beforeCreate/created：
   所有初始化逻辑应在 setup() 中完成。
4. SSR 中不可用的钩子：
   beforeMount、mounted、beforeUpdate、updated 在服务端渲染时不会执行。

---

6. 特殊场景钩子

activated 和 deactivated

• 用途：用于 <keep-alive> 缓存的组件，监听组件的激活/停用状态。
• 示例：

  export default {
    activated() {
      console.log('组件被激活（从缓存中恢复）');
    },
    deactivated() {
      console.log('组件被停用（进入缓存）');
    }
  }
  

错误处理钩子（Vue2.5+）

• errorCaptured：捕获子组件树中的错误，可用于全局错误上报。

  export default {
    errorCaptured(err, vm, info) {
      console.error('捕获到错误：', err);
      return false; // 阻止错误继续向上传播
    }
  }
  

---

总结

• Vue2 生命周期钩子：beforeCreate → created → beforeMount → mounted → beforeUpdate → updated → beforeDestroy → destroyed。
• Vue3 主要变化：重命名销毁阶段钩子，引入组合式 API 的 onX 函数。
• 核心原则：
  • 数据初始化在 created（Vue2）或 setup（Vue3）。
  • DOM 操作在 mounted 后执行。
  • 资源清理在 beforeUnmount/beforeDestroy 中完成。

理解生命周期钩子的执行顺序和适用场景，有助于编写高效、可维护的 Vue 组件。