【vue】10.组件的生命周期-从Vue 2到Vue 3的演变

自Vue 2发布以来，它以其简单易用、灵活高效的特点赢得了众多开发者的喜爱。随着时间的推移，Vue 3在Vue 2的基础上进行了全面升级，其中包括对组件生命周期的调整。本文将首先回顾Vue 2的组件生命周期，然后重点介绍Vue 3组件生命周期的变化和特点。

一、Vue 2组件生命周期简介

组件生命周期指的是组件从创建到销毁的整个过程，这个过程被划分为几个特定的阶段，每个阶段都有对应的钩子函数供开发者介入组件的行为。Vue 2的组件生命周期主要包括四个阶段：创建前/后、挂载前/后、更新前/后和销毁前/后。以下是各个阶段的生命周期钩子：

1. 创建前/后：

   • beforeCreate：在实例初始化之后、数据观测和事件/侦听器配置之前调用。
   • created：在实例创建完成后调用，此时已完成数据观测、属性和方法的运算，但DOM结构还未生成。

2. 挂载前/后：

   • beforeMount：在挂载开始之前调用，此时已完成了模板的编译，但还未将数据渲染到页面上。
   • mounted：在el被新创建的vm.$el替换，并挂载到实例上之后调用。

3. 更新前/后：

   • beforeUpdate：数据更新时调用，发生在虚拟DOM打补丁之前。
   • updated：由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。

4. 销毁前/后：

   • beforeDestroy：在实例销毁之前调用，此时实例仍然完全可用。
   • destroyed：在实例销毁后调用，此时所有的事件监听器已被移除，子实例也被销毁。

二、Vue 3组件生命周期详解

Vue 3在Vue 2的基础上进行了一些调整，主要包括生命周期钩子的名称变化和组合式API的引入。

1. 生命周期钩子名称调整

• 挂载阶段：

  • beforeMount：与Vue 2相同，在挂载开始之前调用。
  • mounted：与Vue 2相同，在el被新创建的vm.$el替换，并挂载到实例上之后调用。

• 更新阶段：

  • beforeUpdate：与Vue 2相同，数据更新时调用。
  • updated：与Vue 2相同，虚拟DOM重新渲染和打补丁之后调用。

• 销毁阶段：

  • beforeUnmount：取代了Vue 2的beforeDestroy，在组件卸载之前调用。
  • unmounted：取代了Vue 2的destroyed，在组件卸载之后调用。

2. 组合式API生命周期钩子

Vue 3引入了组合式API，允许在setup函数中使用生命周期钩子。以下是一些常用的组合式API生命周期钩子：

• onBeforeMount：在挂载开始之前调用。
• onMounted：在组件挂载完成后调用。
• onBeforeUpdate：在数据更新之前调用。
• onUpdated：在数据更新之后调用。
• onBeforeUnmount：在组件卸载之前调用。
• onUnmounted：在组件卸载之后调用。

import { onMounted, onUpdated, onUnmounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('组件已挂载');
    });
    onUpdated(() => {
      console.log('组件已更新');
    });
    onUnmounted(() => {
      console.log('组件已卸载');
    });
  }
};

3.Vue 3组件生命周期的详细介绍

上面是实例生命周期的图表。你现在并不需要完全理解图中的所有内容，但以后它将是一个有用的参考。（来自vue官网）

初始化阶段（Creation Phase）

在这个阶段，组件实例被创建，但尚未挂载到DOM上。

• beforeCreate：这是组件生命周期中的第一个钩子，此时组件实例尚未被完全创建。在这个钩子中，无法访问组件的响应式数据（data）、计算属性（computed）和方法（methods），因此它的使用场景比较有限，通常用于插件开发中的初始化操作。

• created：在组件实例创建之后立即调用。此时，组件的响应式数据和方法已经设置好了，但是DOM结构还未生成。这个钩子适合进行数据初始化和发送异步请求等操作，但应避免进行DOM操作，因为此时组件还未挂载。

挂载阶段（Mounting Phase）

在这个阶段，组件实例被挂载到DOM上。

• beforeMount：在组件DOM被挂载到页面前调用。此时，模板已经编译完成，但数据尚未被渲染到页面上。可以访问到组件的根元素引用（this.$el），但该元素还未渲染数据。这个钩子可以用于执行一些预处理或清理工作。

• mounted：在组件DOM被挂载到页面后调用。此时，组件已经完全渲染到页面上，可以访问到DOM结构。这个钩子通常用于执行需要访问到DOM的操作，比如集成第三方库、手动挂载子组件等。

更新阶段（Update Phase）

在这个阶段，组件的响应式数据发生变化，导致组件需要重新渲染。

• beforeUpdate：在响应式数据发生变化之后，DOM更新之前调用。在这个钩子中，可以访问到更新前的DOM和新数据，适合在更新前访问现有的DOM状态。可以用于移除已添加的事件监听器或其他清理工作。

• updated：在响应式数据发生变化后，DOM已经更新时调用。在这个钩子中应避免直接修改响应式数据，以免造成无限循环更新。可以用于执行依赖于更新后的DOM操作。

卸载阶段（Unmounting Phase）

在这个阶段，组件实例从DOM上卸载。

• beforeUnmount：在组件实例被卸载之前调用。此时，组件实例仍然完全可用，是解绑监听器、取消Vue实例之间的事件通信等的理想时机。

• unmounted：在组件实例被卸载之后调用。此时，组件实例的所有指令都被解绑，所有的事件监听器都被移除。这个钩子用于执行清理操作，如清除定时器、取消网络请求等。

三、总结

Vue 3组件生命周期在Vue 2的基础上进行了优化和调整，使得组件的管理更加灵活和高效。通过引入组合式API，Vue 3为开发者提供了更多组织代码的方式，使得组件逻辑更加清晰。了解和掌握Vue 3组件生命周期，对于开发者来说具有重要意义。

在未来的前端开发实践中，我们可以充分利用Vue 3的生命周期特性，打造更加优雅、高效的应用程序。让我们一起探索Vue 3的无限可能，为用户带来更好的体验！