VUE 的生命周期，了解它，掌握它

前端

2023-12-31 00:40:51

VUE 生命周期钩子：构建动态和健壮的应用程序

在 VUE 中，生命周期钩子是强大的工具，可让您在组件的不同阶段执行自定义逻辑，从而构建健壮且可维护的应用程序。

生命周期钩子概述

想象一下 VUE 组件就像我们人生中的不同阶段：出生、成长、壮年、衰老和死亡。VUE 生命周期钩子就是这些阶段中的里程碑，允许我们随着组件生命周期的进展执行特定操作。

以下是 VUE 提供的主要生命周期钩子列表：

beforeCreate: 在实例创建后立即调用，在数据观测和事件配置之前。
created: 在实例创建完成后立即调用。
beforeMount: 在组件挂载到父组件之前立即调用。
mounted: 在组件挂载到父组件后立即调用。
beforeUpdate: 在数据更新之前立即调用。
updated: 在数据更新后立即调用。
beforeDestroy: 在组件销毁之前立即调用。
destroyed: 在组件销毁后立即调用。

这些钩子就像挂在组件生命周期上的挂钩，让我们可以在特定时刻插入自定义行为。

深入了解生命周期阶段

初始化

在这个阶段，VUE 创造了组件的新实例。您可以在此处初始化数据、注册事件侦听器和创建子组件。

创建

VUE 编译组件模板，生成虚拟 DOM，用于在屏幕上呈现组件。在此阶段，您可以访问组件的属性、数据和方法。

挂载

VUE 将虚拟 DOM 转换为实际的 DOM 并将其附加到父组件中。这是组件与用户交互的开始。

更新

每当组件的数据更改时，VUE 都会重新计算虚拟 DOM 并更新实际的 DOM 以匹配它。您可以使用此钩子在数据更新后执行操作。

销毁

当组件不再需要时，VUE 将其从父组件中删除并释放其资源。这是清理任何剩余状态并断开任何订阅的好时机。

计算属性和自定义方法

除了生命周期钩子，VUE 还提供计算属性和自定义方法，使您能够进一步增强组件的行为。

计算属性: 允许您定义只读属性，其值基于组件的数据和属性进行计算。
自定义方法: 允许您定义可以在组件中调用的方法。

示例

<template>
  <h1>{{ greeting }}</h1>
  <button @click="greet">Greet</button>
</template>

<script>
export default {
  data() {
    return {
      name: 'John Doe'
    };
  },
  computed: {
    greeting() {
      return `Hello, ${this.name}!`;
    }
  },
  methods: {
    greet() {
      alert(this.greeting);
    }
  }
};
</script>