Vue 2 生命周期钩子，Vue 3 生命周期钩子【详解】

Vue.js 的生命周期是指 Vue 实例从创建到销毁的过程，分为多个阶段，每个阶段有对应的生命周期钩子函数，可以在这些钩子中添加特定的逻辑。下面是 Vue 2 和 Vue 3 生命周期的详细介绍，以及示例代码。

Vue 2 生命周期钩子

1. beforeCreate: 实例初始化之后，数据观测和事件配置之前被调用。
2. created: 实例创建完成后被调用，数据观测已完成，属性和方法可以访问，但 DOM 还未生成。
3. beforeMount: 在挂载开始之前被调用，相关的 render 函数首次被调用。
4. mounted: el 被新创建的 vm.$el 替换，挂载到实例上后被调用。
5. beforeUpdate: 数据更新时调用，发生在虚拟 DOM 打补丁之前。
6. updated: 由于数据更改，虚拟 DOM 重新渲染和打补丁之后调用。
7. beforeDestroy: 实例销毁之前调用，能在这一步执行清理操作。
8. destroyed: 实例销毁后调用，所有的事件监听器和子实例都被解绑。

Vue 3 生命周期钩子

Vue 3 引入了组合式 API，生命周期钩子以 on 前缀形式出现，如 onMounted。

1. onBeforeMount: 组件挂载之前调用。
2. onMounted: 组件挂载后调用。
3. onBeforeUpdate: 组件更新之前调用。
4. onUpdated: 组件更新后调用。
5. onBeforeUnmount: 组件卸载之前调用。
6. onUnmounted: 组件卸载后调用。

示例代码

Vue 2 示例

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate() {
    console.log('beforeCreate: 实例初始化');
  },
  created() {
    console.log('created: 实例创建完成');
  },
  beforeMount() {
    console.log('beforeMount: 挂载开始');
  },
  mounted() {
    console.log('mounted: 已挂载到 DOM');
  },
  beforeUpdate() {
    console.log('beforeUpdate: 数据即将更新');
  },
  updated() {
    console.log('updated: 数据已更新');
  },
  beforeDestroy() {
    console.log('beforeDestroy: 实例即将销毁');
  },
  destroyed() {
    console.log('destroyed: 实例已销毁');
  }
});

Vue 3 示例

const { createApp, onMounted, onBeforeUnmount } = Vue;

createApp({
  setup() {
    console.log('setup: 组件初始化');

    onBeforeUnmount(() => {
      console.log('onBeforeUnmount: 组件即将卸载');
    });

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

    return {
      message: 'Hello Vue 3!'
    };
  }
}).mount('#app');

逻辑解释

1. 实例初始化: 在 beforeCreate 和 created 阶段，主要用于初始化数据和配置属性。
2. 挂载: 在 beforeMount 和 mounted 阶段，准备 DOM 结构和初始化页面。
3. 更新: 在 beforeUpdate 和 updated 阶段，处理数据更新逻辑。
4. 销毁: 在 beforeDestroy 和 destroyed 阶段，执行清理工作，避免内存泄漏。

这些钩子函数使得开发者能够在组件的不同生命周期阶段执行特定的操作，有效管理状态和资源。希望这个详细的介绍对你有帮助！如果有更多问题或需要更深入的示例，随时问我！