Vue 3 和 Vue 2 生命周期对比及其区别

Vue 2 生命周期回顾

首先，让我们回顾一下 Vue 2 的生命周期。Vue 2 的生命周期包括以下钩子函数：

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

Vue 3 生命周期的变化

Vue 3 引入了一些生命周期的改变，以提高性能和可维护性。以下是 Vue 3 生命周期的主要变化：

1. beforeCreate 和 created 钩子没有变化 - Vue 3 保留了 beforeCreate 和 created钩子，它们的功能和 Vue 2 中相同。
2. beforeMount 和 mounted 钩子也没有变化 - 这两个钩子仍然用于在挂载开始和挂载完成时执行操作。
3. beforeUpdate 和 updated 钩子保持不变 - Vue 3中的数据更新仍然会触发这两个钩子，用于在更新之前和之后执行逻辑。
4. beforeDestroy 和 destroyed 钩子不再推荐使用Vue 3 推荐使用新的 beforeUnmount 和 unmounted 钩子来替代它们。
5. 新增 beforeUnmount 和 unmounted 钩子 - 这两个钩子在组件卸载之前和之后分别被调用。它们取代了 Vue 2 中的 beforeDestroy 和destroyed 钩子，以更好地反映组件生命周期。

下面是 Vue 3 生命周期的示例代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  },
  beforeUnmount() {
    console.log('beforeUnmount')
  },
  unmounted() {
    console.log('unmounted')
  },
  data() {
    return {
      message: 'Hello, Vue 3!'
    }
  }
}
</script>

当我们深入探讨 Vue 3 和 Vue 2 生命周期的区别时，还有一些关键点需要考虑：

1. 生命周期的重命名
   Vue 3 的生命周期钩子经历了一些重命名，以更好地反映其功能。这有助于提高代码的可读性和维护性。例如，beforeDestroy 和 destroyed 分别被重命名为 beforeUnmount 和 unmounted，这样更清晰地表示它们在组件卸载前和卸载后执行。

2. 组件的卸载顺序
   在 Vue 2 中，子组件的 beforeDestroy 钩子会在父组件的 beforeDestroy 钩子之前调用。然而，在 Vue 3 中，子组件的 beforeUnmount 钩子会在父组件的 beforeUnmount 钩子之后调用。这种变化可能会影响到一些特定场景的逻辑。

3. 组件卸载的优化
   Vue 3 引入了更好的组件卸载优化，这意味着在组件销毁时性能更好。Vue 2 中的 destroyed 钩子执行后，组件仍然保留了一些内部状态。在 Vue 3 中，unmounted 钩子执行后，组件会更彻底地被销毁，减少了内存泄漏的可能性。

4. Composition API 的影响
   Vue 3 引入了 Composition API，它可以用于编写更灵活和可复用的组件逻辑。与 Vue 2 的 Options API 相比，Composition API 会影响到生命周期钩子的使用方式。在 Composition API 中，生命周期钩子可以作为函数使用，而不是对象的属性，这进一步改变了生命周期的编写方式。

以下是一个使用 Composition API 的示例：

<script>
import { ref, onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3 with Composition API!');

    onBeforeMount(() => {
      console.log('beforeMount');
    });

    onMounted(() => {
      console.log('mounted');
    });

    onBeforeUnmount(() => {
      console.log('beforeUnmount');
    });

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

    return {
      message
    };
  }
}
</script>

这个示例中，我们使用 Composition API 中提供的函数来定义生命周期钩子，使代码更模块化和可读性更高。
总的来说，Vue 3 的生命周期变化旨在提高开发体验和性能，并且更好地与 Composition API 配合使用。如果您计划迁移项目或开始新的 Vue 3 项目，了解这些变化将有助于您更好地利用 Vue 3 的潜力。