VUE的生命周期钩子，vue2和vue3的生命周期钩子的核心差异

生命周期钩子（Lifecycle Hooks）是Vue框架中组件从创建到销毁的整个生命周期中，在特定阶段自动执行的函数，用于让开发者在组件的不同阶段（如初始化、挂载、更新、销毁等）插入自定义逻辑（如数据请求、事件监听、资源清理等）。

一、生命周期钩子的核心作用

组件像"有生命的物体"一样，会经历从"出生"（创建）到"运行"（更新）再到"死亡"（销毁）的过程。生命周期钩子就是在这些关键节点"插队"执行代码的机制，例如：

• 组件刚创建时（created）：初始化数据、发起接口请求。
• 组件挂载到页面后（mounted）：操作DOM、初始化第三方插件（如ECharts）。
• 组件销毁前（beforeDestroy）：清除定时器、解绑事件监听，避免内存泄漏。

二、Vue 2 和 Vue 3 都有生命周期钩子

在语法和部分钩子名称上有细微差异。

1. Vue 2 的生命周期钩子（选项式API）

Vue 2 使用选项式API （export default { created() {}, mounted() {} }）定义生命周期钩子，常用钩子及执行顺序如下：

钩子名称	执行时机	典型用途
beforeCreate	组件实例刚创建，数据和方法未初始化	几乎不用（无法访问data和methods）
created	组件实例创建完成，数据和方法已初始化	发起接口请求、初始化数据
beforeMount	组件即将挂载到DOM，模板未渲染	准备DOM相关操作
mounted	组件已挂载到DOM，模板已渲染	操作DOM、初始化插件（如地图、图表）
beforeUpdate	数据更新后，DOM更新前	获取更新前的DOM状态
updated	数据更新后，DOM已重新渲染	处理更新后的DOM逻辑
beforeDestroy	组件即将销毁	清除定时器、解绑事件监听
destroyed	组件已销毁	最终清理工作（极少用）

示例（Vue 2）：

export default {
  data() {
    return { count: 0 };
  },
  created() {
    console.log('组件创建完成，可访问data：', this.count);
    this.fetchData(); // 调用方法发起请求
  },
  mounted() {
    console.log('组件已挂载到DOM：', this.$el); // 操作DOM
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
  },
  methods: {
    fetchData() { /* 接口请求逻辑 */ }
  }
};

2. Vue 3 的生命周期钩子（组合式API）

Vue 3 推荐使用组合式API （setup函数），生命周期钩子需要从vue中导入并在setup中调用 ，部分钩子名称略有调整（主要是destroyed相关），常用钩子及对应关系如下：

Vue 3 钩子（组合式）	对应Vue 2钩子	执行时机
onBeforeMount	beforeMount	组件即将挂载
onMounted	mounted	组件已挂载
onBeforeUpdate	beforeUpdate	数据更新，DOM未更新
onUpdated	updated	数据更新，DOM已更新
onBeforeUnmount	beforeDestroy	组件即将销毁
onUnmounted	destroyed	组件已销毁

示例（Vue 3）：

import { onMounted, onBeforeUnmount } from 'vue';

export default {
  setup() {
    let timer;

    onMounted(() => {
      console.log('组件已挂载');
      timer = setInterval(() => { /* 定时器逻辑 */ }, 1000);
    });

    onBeforeUnmount(() => {
      console.log('组件即将销毁');
      clearInterval(timer); // 清除定时器
    });

    return { /* 暴露给模板的数据 */ };
  }
};

三、Vue 2 和 Vue 3 生命周期钩子的核心差异

1. 语法形式：

   • Vue 2 是选项式 ，直接在组件选项中定义钩子函数（如created() {}）。
   • Vue 3 是组合式 ，需要导入钩子函数（如import { onMounted }）并在setup中注册。

2. 销毁阶段的钩子名称：

   • Vue 2 用 beforeDestroy 和 destroyed。
   • Vue 3 更名为 onBeforeUnmount 和 onUnmounted（更贴合"卸载"的语义）。

3. 执行上下文：

   • Vue 2 钩子中通过 this 访问组件实例（如this.data、this.methods）。
   • Vue 3 组合式API中没有 this，直接使用setup中定义的变量和函数。

vue官网生命周期图