Vue 生命周期钩子总结

Vue 生命周期钩子总结

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

1. 生命周期阶段概览

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

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

2. Vue2 生命周期钩子

钩子函数及触发顺序

代码示例

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 钩子对照表

Vue3 组合式 API 示例

import { onMounted, onUnmounted } from 'vue';

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

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

4. 常见使用场景

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 组件。