揭秘 Vue 生命周期：钩子函数的八大秘密

前端

2023-09-16 23:13:36

在 Vue 的生命周期中，钩子函数扮演着至关重要的角色。这八个钩子函数就像八个关键点，串联起组件从诞生到消亡的全过程。理解这些钩子函数，不仅能提升代码的可读性和可维护性，更能让你对 Vue 的内部运作机制有更深入的认识。

生命周期的四个阶段

Vue 的生命周期通常划分为四个阶段：初始化、挂载、更新和卸载。

阶段 1：初始化

在此阶段，组件被创建，但尚未挂载到 DOM 中。它包含两个钩子函数：

beforeCreate： 组件实例被创建之前触发。可用于初始化数据和计算属性。
created： 组件实例被创建之后触发。可用于获取父组件的属性或执行异步操作。

阶段 2：挂载

在此阶段，组件被挂载到 DOM 中。它包含两个钩子函数：

beforeMount： 在组件挂载到 DOM 之前触发。可用于最后一次修改 DOM 之前的数据。
mounted： 组件挂载到 DOM 之后触发。此时，DOM 操作已完成，可与用户交互。

阶段 3：更新

在此阶段，组件响应数据或 prop 的变化而更新。它包含两个钩子函数：

beforeUpdate： 在组件更新之前触发。可用于在更新 DOM 之前执行一些操作。
updated： 组件更新之后触发。此时，DOM 更新已完成，可执行与更新后的 DOM 相关的操作。

阶段 4：卸载

在此阶段，组件从 DOM 中卸载。它包含两个钩子函数：

beforeDestroy： 在组件销毁之前触发。可用于释放资源或执行清理操作。
destroyed： 组件销毁之后触发。此时，组件实例已不存在，所有资源已被释放。

钩子函数的强大用途

钩子函数的应用范围十分广泛，包括：

数据初始化： 在 created 钩子中初始化数据，确保数据在组件挂载前已经就绪。
异步操作： 在 created 或 mounted 钩子中执行异步操作，如获取远程数据或发起 API 请求。
DOM 操作： 在 mounted 或 updated 钩子中进行 DOM 操作，确保 DOM 与数据同步。
生命周期管理： 在 beforeDestroy 或 destroyed 钩子中释放资源或执行清理操作，确保组件销毁时不会留下任何垃圾。
自定义行为： 钩子函数可以用来创建自定义行为，如在组件挂载前显示加载动画，或在组件销毁后隐藏特定元素。

真实世界的示例

让我们通过一个简单的示例来理解钩子函数的实际应用：

import { ref } from 'vue';

export default {
  setup() {
    // 在 created 钩子中初始化数据
    const count = ref(0);

    // 在 beforeUpdate 钩子中更新 DOM 之前的操作
    const beforeUpdate = () => {
      console.log('计数即将更新，当前计数：', count.value);
    };

    // 在 mounted 钩子中执行异步操作
    const mounted = () => {
      setTimeout(() => {
        count.value++;
      }, 1000);
    };

    return {
      count,
      beforeUpdate,
      mounted
    };
  }
};