了解 Vue 生命周期钩子的指南

Posted on by

与其他框架一样，Vue 有许多生命周期钩子（Lifecycle Hooks），它们允许我们将代码附加到在创建或使用 Vue 应用程序时发生的特定事件 – 例如，当组件加载时，当组件添加到 DOM 时，或者当某些东西被删除时。

Vue 有很多生命周期钩子，令人困惑的是每个钩子的含义或作用。在本指南中，我们将介绍每个生命周期挂钩的作用以及如何使用它们。

先决条件

如果您不熟悉 Vue，您可能想在执行此操作之前查看我的关于创建您的第一个 Vue 应用程序的指南。或者，如果您稍微熟悉它 ，您可以阅读我的在 Vue 创建待办事项列表的指南。

Vue 中的生命周期钩子#

这里需要注意的重要一点是，Vue 在生命周期钩子方面有两种范式。一种是使用 Vue 3 中引入的 Compositions API，另一种是“ Options API ”，这是定义 Vue 组件的原型模式。在本指南中，我们将从Options API开始，然后以此为基础来展示组件 API 中的工作原理。

Option API 示例

如果你对Options API不熟悉，那就是 Vue 的版本，看起来像下面的代码：

export default {
    name: 'Component Name',
    data() {
        return {
            phoneNumber: '123-123-123'
        }
    },
    mounted() {

    }
}

生命周期挂钩图#

要了解每个生命周期挂钩何时触发，让我们看一个图表。下图描述了每个生命周期挂钩何时触发。

Legend

运行生命周期挂钩#

要使用 Options API 运行任何生命周期挂钩，您可以将其添加到您的 Javascript 原型中。例如，如果你想使用 `beforeCreate()`，在检测到新组件后触发的第一个钩子，你可以像这样添加它：

export default {
    name: 'Component Name',
    data() {
        return {
            someData: '123-123-123'
        }
    },
    mounted() {
        // Any code you want to fire immediately before the Options API loads up
    }
}

现在我们已经介绍了不同的钩子何时发生，让我们看看它们各自做了什么，以及它们何时发生。

beforeCreate()#

在组件初始化时调用。data()和计算属性此时不可用。它对于调用不调整组件数据的 API 很有用。如果您data()在此处更新，一旦选项 API 加载，它将丢失。

create()#

在实例处理完所有状态操作后调用。您可以访问响应式数据、计算属性、方法和观察者。$el，这是 Vue 存储组件 HTML 的地方，目前还不可用，因为没有创建 DOM 元素。如果您想触发 API 或 update 之类的东西data()，可以在此处进行。

beforeMount()#

这个钩子在渲染发生之前立即运行。模板已编译，因此它存储在内存中，但尚未附加到页面。尚未创建任何 DOM 元素。$el在这个阶段仍然无法使用。

在进行站点的服务器端渲染时不会调用此方法。

mounted()#

该组件已安装并显示在页面上。$el现在可用，因此您现在可以从 Vue.js 访问和操作 DOM。这只会在所有子组件完全安装后触发。当您想在 DOM 加载后对其执行某些操作时，使用它很有用，比如可能更改其中的特定元素。

在进行站点的服务器端渲染时不会调用此方法。

beforeUpdate()#

有时，您会通过在观察者中更新数据或通过用户交互来更改 Vue 组件中的数据。当您更改data()或导致组件重新渲染时，将触发更新事件。在重新渲染发生之前，beforeUpdate()将立即触发。在此事件之后，组件将重新渲染并使用最新数据进行更新。你可以使用这个钩子来访问 DOM 的当前状态，甚至data()从中更新。

在进行站点的服务器端渲染时不会调用此方法。

update()#

触发更新后，并且 DOM 已更新以匹配最新数据，updated()将触发。这在重新渲染后立即发生。现在，如果您访问$elDOM 内容或其他任何有关 DOM 内容的内容，它将显示新的、重新渲染的版本。如果您有父组件，updated()则首先调用子组件，然后调用父updated()挂钩。

在进行站点的服务器端渲染时不会调用此方法。

beforeUnmount()#

如果一个组件被移除，那么它就会被卸载。在组件被完全移除之前，beforeUnmount()触发。该事件仍然可以访问 DOM 元素以及与组件有关的任何其他内容。这在删除事件中很有用，例如，您可以使用此事件通知服务器用户已删除表中的节点。如果您需要使用它们，您仍然可以访问this.$el，以及数据、观察者和方法。

在进行站点的服务器端渲染时不会调用此方法。

unmount()#

一旦完全删除，unmount()事件就会触发。这可用于清理其他数据或事件侦听器或计时器，让他们知道该组件不再存在于页面上。如果您需要使用它们，您仍然可以访问this.$el，以及数据、观察者和方法。

在进行站点的服务器端渲染时不会调用此方法。

将 Vue 生命周期钩子与 Composition API 一起使用#

如果你习惯使用Options API，上面的钩子会很有意义。如果您主要使用 Vue 3，您可能更习惯使用Composition API。Composition API 是对 Options API 的补充，但我们使用钩子的方式略有不同。让我们来看看它是如何工作的。

created() 和 beforeCreated() 被替换为 setup()

在合成 API 中，created()并且beforeCreated()不可访问。相反，它们被替换为setup(). 这是有道理的，因为没有要加载的“选项 API”。您本来可以输入created()或的任何代码现在都beforeCreated()可以安全地输入setup()

钩子可以与 setup() 一起使用

Hooks 仍然可以与设置一起使用，就像它们在 Options API 中一样，这非常直观。例如：

export default {
    data() {
        return {
            msg: 1
        }
    },
    setup() {
        console.log('Component setup complete')
    },
    mounted() {
        console.log(this.$el)
    },
}

但是，您可能会看到这样做的另一种方式是setup()使用组合 API 函数在函数本身中定义挂钩。如果我们这样做，钩子的命名会略有不同：

  • beforeMount()变成onBeforeMount()
  • mounted()变成onMounted()
  • beforeUpdate()变成onBeforeUpdate()
  • updated()变成onUpdated()
  • beforeUnmount()变成onBeforeUnmount()
  • unmounted()变成onUnmounted()

这些函数的作用与我在上一节中描述的完全相同，但它们的调用方式略有不同。所有这些钩子都必须在setup()函数或setup脚本中调用。例如，您必须在 setup 函数中运行您的钩子，如下所示：

export default {
    setup() {
        // All hooks must go here
    }
}

或者，在具有如下setup属性的脚本标记中：

<script setup>
// All hooks must go within this setup script
</script>

因此，如果您想使用这种方法调用钩子，您的代码将如下所示：

export default {
    setup() {
        // All hooks must go here
        onBeforeMount(() => {
            // Code for beforeMount()
        });
        onBeforeUpdate(() => {
            // Code for beforeUpdate()
        })
    }
}

没有根本的性能改进，也没有更好的理由。这只是另一种方式——在某些情况下，它会使您的代码更易于阅读和维护。对于其他情况，使用Options API可能会更好，因此请使用您觉得更舒服的任何一个。

结论#

Vue 生命周期相当复杂，但它为我们提供了很多工具来运行代码、更新数据并确保我们的组件以我们想要的方式显示。在本指南中，我们介绍了它的工作原理、何时使用生命周期的每个部分，以及在生命周期挂钩方面，Compositions API 与 Options API 的工作方式有何不同。

如果你喜欢这个，你可能会喜欢我的其他一些 Vue 内容。以下是一些相关链接：

推荐阅读：