Vue 3 生命周期：全面理解组件的生命周期

前端

2023-11-17 23:21:29

Vue 3 生命周期概述

Vue 3 的组件生命周期是指组件实例从创建到销毁所经历的一系列阶段。生命周期中的每个阶段都有其特定的任务和功能，它们共同保证了组件的正常运行和销毁。了解生命周期对于构建健壮和可维护的 Vue 应用至关重要。

生命周期阶段

Vue 3 组件的生命周期分为以下几个阶段：

创建：组件实例被创建，但尚未挂载到 DOM 中。
挂载：组件实例被挂载到 DOM 中，可以与用户交互。
更新：组件实例的状态发生变化，需要更新 DOM。
卸载：组件实例从 DOM 中卸载，不再与用户交互。

生命周期钩子

生命周期钩子是 Vue 提供的特殊函数，允许我们在组件生命周期的不同阶段执行特定的操作。这些钩子可以用来初始化数据、更新 DOM、处理用户交互以及进行资源清理等。常用的生命周期钩子包括：

created ：在组件实例创建时调用。
mounted ：在组件实例挂载到 DOM 中后调用。
updated ：在组件实例的状态发生变化后调用。
beforeDestroy ：在组件实例销毁之前调用。

理解每个生命周期阶段

创建阶段

在创建阶段，组件实例被创建，但尚未挂载到 DOM 中。此时，我们可以执行一些初始化操作，例如获取数据、设置初始状态等。

export default {
  created() {
    // 获取数据
    this.data = fetchUserData();

    // 设置初始状态
    this.count = 0;
  },
};

挂载阶段

在挂载阶段，组件实例被挂载到 DOM 中，可以与用户交互。此时，我们可以执行一些与 DOM 相关的操作，例如渲染模板、绑定事件监听器等。

export default {
  mounted() {
    // 渲染模板
    this.$el.innerHTML = `<h1>Count: ${this.count}</h1>`;

    // 绑定事件监听器
    this.$el.addEventListener('click', this.incrementCount);
  },
};

更新阶段

在更新阶段，组件实例的状态发生变化，需要更新 DOM。此时，我们可以执行一些与数据变化相关的操作，例如更新模板、重新绑定事件监听器等。

export default {
  updated() {
    // 更新模板
    this.$el.innerHTML = `<h1>Count: ${this.count}</h1>`;

    // 重新绑定事件监听器
    this.$el.removeEventListener('click', this.incrementCount);
    this.$el.addEventListener('click', this.incrementCount);
  },
};

卸载阶段

在卸载阶段，组件实例从 DOM 中卸载，不再与用户交互。此时，我们可以执行一些资源清理操作，例如移除事件监听器、释放内存等。

export default {
  beforeDestroy() {
    // 移除事件监听器
    this.$el.removeEventListener('click', this.incrementCount);

    // 释放内存
    this.data = null;
  },
};