掌握Vue 3生命周期：从组合式API到高效代码实践

引言

在 Vue 3 中，生命周期的概念得到了进一步的优化和简化。Vue 3 引入了组合式 API（Composition API），这为开发者提供了更灵活的方式来组织和重用代码逻辑。与传统的选项式 API（Options API）相比，组合式 API 使得生命周期钩子的使用更加直观和方便。

Vue 3 生命周期概述

Vue 3 引入了新的生命周期钩子和改进了现有的生命周期管理方式，以适应组合式 API 的引入。生命周期钩子是 Vue 组件中用于控制组件在不同阶段执行特定逻辑的函数。了解这些钩子对于构建高效和可维护的 Vue 应用程序至关重要。

Vue 3 中的生命周期钩子

在 Vue 3 中，生命周期钩子被分为两个主要类别：组合式 API 钩子和选项式 API 钩子。组合式 API 提供了一种更灵活的方式来组织和重用代码逻辑，而选项式 API 则保持了 Vue 2 的风格，适合那些熟悉旧版本的开发者。

组合式 API（Composition API）与生命周期钩子的关系

组合式 API 通过引入 setup() 函数，为开发者提供了一种新的方式来编写组件逻辑。在 setup() 函数中，你可以使用一系列的响应式函数和生命周期钩子，这些钩子与传统的选项式 API 中的钩子在功能上是等价的，但使用方式有所不同。

在组合式 API 中，生命周期钩子被定义为独立的函数，而不是作为组件选项。这意味着你可以根据需要导入和使用这些钩子，而不是依赖于组件的选项对象。这种灵活性使得代码更加模块化和可重用。

例如，onMounted() 钩子在组件挂载到 DOM 后被调用，无论是在 setup() 函数中直接使用，还是在其他组合式 API 函数中导入使用，其功能都是相同的，而且可以重复使用。这为开发者提供了更大的灵活性，允许他们在不同的上下文中重用生命周期逻辑。

Vue 3 生命周期钩子详解

setup()

作用和时机：setup() 是 Vue 3 组件的入口点，它在组件创建之前被调用，此时组件实例尚未创建。这是组合式 API 的核心，允许你在组件实例化之前执行逻辑，如定义响应式状态、方法和生命周期钩子。
setup() 中的生命周期钩子：在 setup() 函数中，你可以直接使用生命周期钩子，如 onMounted()、onUnmounted() 等，这些钩子在组件的相应生命周期阶段被调用。

onBeforeMount()

作用：onBeforeMount() 钩子在组件即将挂载到 DOM 之前被调用。这是在组件的模板或渲染函数被编译成虚拟 DOM 之后，但在实际 DOM 被创建和插入到页面之前。
何时调用：在 setup() 函数之后，组件的模板或渲染函数被编译后，但在 DOM 更新之前。

onMounted()

作用：onMounted() 钩子在组件挂载到 DOM 后被调用。这是在组件的模板或渲染函数被编译成虚拟 DOM，并且实际 DOM 被创建和插入到页面之后。
何时调用：在 onBeforeMount() 钩子之后，组件的 DOM 已经被创建并插入到页面。

onBeforeUpdate()

作用：onBeforeUpdate() 钩子在组件即将更新其 DOM 之前被调用。这是在响应式状态变化后，但在实际 DOM 更新之前。
何时调用：在组件的响应式状态变化后，但在 DOM 更新之前。

onUpdated()

作用：onUpdated() 钩子在组件更新其 DOM 后被调用。这是在响应式状态变化后，DOM 已经被更新。
何时调用：在 onBeforeUpdate() 钩子之后，组件的 DOM 已经被更新。

onBeforeUnmount()

作用：onBeforeUnmount() 钩子在组件即将卸载和销毁之前被调用。这是在组件的 DOM 被移除之前，但在组件实例销毁之前。
何时调用：在组件的 DOM 即将被移除之前。

onUnmounted()

作用：onUnmounted() 钩子在组件卸载和销毁后被调用。这是在组件的 DOM 已经被移除，组件实例已经销毁。
何时调用：在 onBeforeUnmount() 钩子之后，组件的 DOM 已经被移除，组件实例已经销毁。

onErrorCaptured()

作用：onErrorCaptured() 钩子在捕获一个来自子孙组件的错误时被调用。这是在错误被抛出后，但在它被全局错误处理器处理之前。
何时调用：在子孙组件发生错误时。

onRenderTracked()

作用：onRenderTracked() 钩子在渲染过程中追踪到一个依赖时被调用。这是在组件的响应式依赖被追踪时，通常用于调试。
何时调用：在组件的响应式依赖被追踪时。

onRenderTriggered()

作用：onRenderTriggered() 钩子在渲染过程中触发一个依赖时被调用。这是在组件的响应式依赖被触发时，通常用于调试。
何时调用：在组件的响应式依赖被触发时。

这些生命周期钩子为开发者提供了在组件生命周期的特定时刻执行代码的能力，从而允许更精细地控制组件的行为和性能。在实际开发中，合理地使用这些钩子可以提高应用的响应性和效率。

选项式和组合式

选项式 API（Options API）示例

在选项式 API 中，生命周期钩子是作为组件对象的属性定义的。

export default {
  data() {
    return {
      message: 'Hello Vue 3!'
    };
  },
  created() {
    console.log('组件创建完成', this.message);
  },
  mounted() {
    console.log('组件挂载完成', this.message);
  },
  beforeDestroy() {
    console.log('组件即将销毁', this.message);
  }
};

在上面的示例中，created、mounted 和 beforeDestroy 是生命周期钩子，它们分别在组件创建、挂载和销毁之前被调用。

组合式 API（Composition API）示例

在组合式 API 中，生命周期钩子是作为独立的函数导入并使用的。

import { ref, onMounted, onBeforeUnmount } from 'vue';

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

    onMounted(() => {
      console.log('组件挂载完成', message.value);
    });

    onBeforeUnmount(() => {
      console.log('组件即将销毁', message.value);
    });

    return {
      message
    };
  }
};

在上面的示例中，onMounted 和 onBeforeUnmount 是生命周期钩子，它们分别在组件挂载和即将销毁之前被调用。ref 用于创建响应式数据。

选项式 API 与组合式 API 的主要区别

代码组织：选项式 API 通过将逻辑组织在不同的选项（如 data, methods, created, mounted 等）中，而组合式 API 通过 setup 函数将逻辑组织在一起，使得代码更加模块化和可重用。
灵活性：组合式 API 允许开发者在 setup 函数中自由地使用响应式 API 和生命周期钩子，而选项式 API 的逻辑组织方式较为固定。
可读性：对于熟悉 Vue 2 的开发者来说，选项式 API 可能更直观易懂，而组合式 API 需要一定的学习曲线，但一旦掌握，可以编写出更加清晰和可维护的代码。

在实际开发中，你可以根据项目需求和个人偏好选择使用选项式 API 或组合式 API。Vue 3 提供了这两种 API，以适应不同场景和开发者的习惯。在组合式API中，我们可以把相关联的模块放到一个setup（）里，整个script由多个setup（）组成，个人认为组合式的出现是增加了代码的可维护性，减少了‘鼠标滚轮抡到冒烟’这种情况。