Vue3生命周期函数改了几个

Vue3 是 Vue.js 框架的最新版本，它在 Vue2 的基础上进行了许多改进和优化。其中，生命周期函数也发生了一些变化。本文将详细介绍 Vue3 中生命周期函数的改动，并解释这些改动对开发者意味着什么。

Vue2 生命周期回顾

在 Vue2 中，组件的生命周期函数主要包括以下几个：

1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
2. created：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
3. beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。
4. mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
5. beforeUpdate：数据更新时调用，发生在虚拟 DOM 打补丁之前。
6. updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
7. beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
8. destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Vue3 生命周期函数的改动

Vue3 对生命周期函数进行了一些调整，主要体现在以下几个方面：

1. beforeCreate 和 created 被合并为 setup

在 Vue3 中，beforeCreate 和 created 这两个生命周期函数被合并到了 setup 函数中。setup 是 Vue3 引入的一个新的组合式 API，它在组件实例创建之前执行，替代了 Vue2 中的 beforeCreate 和 created。

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    // 相当于 Vue2 的 created 钩子
    console.log('Component is created');

    return {
      count
    };
  }
};

2. beforeMount 和 mounted 保持不变

beforeMount 和 mounted 这两个生命周期函数在 Vue3 中保持不变，仍然用于处理组件挂载前后的逻辑。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted');
    });
  }
};

3. beforeUpdate 和 updated 保持不变

beforeUpdate 和 updated 这两个生命周期函数在 Vue3 中也没有变化，仍然用于处理组件更新前后的逻辑。

import { onUpdated } from 'vue';

export default {
  setup() {
    onUpdated(() => {
      console.log('Component is updated');
    });
  }
};

4. beforeDestroy 和 destroyed 被替换为 onBeforeUnmount 和 onUnmounted

在 Vue3 中，beforeDestroy 和 destroyed 这两个生命周期函数被替换为 onBeforeUnmount 和 onUnmounted。这两个新的生命周期函数在组件卸载前后执行。

import { onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeUnmount(() => {
      console.log('Component is about to be unmounted');
    });

    onUnmounted(() => {
      console.log('Component is unmounted');
    });
  }
};

5. 新增 onRenderTracked 和 onRenderTriggered

Vue3 还引入了两个新的生命周期函数：onRenderTracked 和 onRenderTriggered。这两个函数用于调试组件的渲染行为。

• onRenderTracked：当组件的某个依赖被追踪时调用。
• onRenderTriggered：当组件的某个依赖触发重新渲染时调用。

import { onRenderTracked, onRenderTriggered } from 'vue';

export default {
  setup() {
    onRenderTracked((event) => {
      console.log('Dependency tracked:', event);
    });

    onRenderTriggered((event) => {
      console.log('Dependency triggered re-render:', event);
    });
  }
};

总结

Vue3 对生命周期函数进行了一些调整，主要是为了配合新的组合式 API 的使用。beforeCreate 和 created 被合并到 setup 中，beforeDestroy 和 destroyed 被替换为 onBeforeUnmount 和 onUnmounted，并且新增了 onRenderTracked 和 onRenderTriggered 用于调试。

这些改动使得 Vue3 的生命周期更加简洁和灵活，同时也为开发者提供了更多的控制权和调试工具。对于习惯了 Vue2 的开发者来说，这些改动可能需要一些时间来适应，但一旦掌握，将会大大提升开发效率和代码质量。