Vue 生命周期钩子详解

Vue 1年前 105

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

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

如果大家不熟悉 Vue，可以参考我们的 Vue 教程。

Vue 中的生命周期钩子

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

Options API 示例

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

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

    }
}

运行生命周期钩子

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

export default {
    name: 'Component Name',
    data() {
        return {
            someData: '123-123-123'
        }
    },
    mounted() {
        // 在 Options API 加载之前立即触发的任何代码
    }
}

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

beforeCreate()

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

created()

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

beforeMount()

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

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

mounted()

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

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

beforeUpdate()

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

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

updated()

触发更新后，并且 DOM 已更新以匹配最新数据，updated() 将触发。这在重新渲染后立即发生。现在，如果我们访问 $el 或其他有关 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() 替换。这是有道理的，因为没有要加载的“Options API”。我们将在 created() 或 beforeCreated() 中放入的任何代码现在都可以安全地放入 setup()

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

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

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

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

beforeMount() 变为 onBeforeMount()
mount() 变为 onMounted()
beforeUpdate() 变为 onBeforeUpdate()
updated() 变为 onUpdated()
beforeUnmount() 变为 onBeforeUnmount()
unmounted() 变为 onUnmounted()

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

export default {
    setup() {
        // 所有的钩子都必须放在这里
    }
}

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

<script setup>
// 所有钩子都必须包含在此设置脚本中
</script>

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

export default {
    setup() {
        // 所有的钩子都必须放在这里
        onBeforeMount(() => {
            // beforeMount() 的代码
        });
        onBeforeUpdate(() => {
            // beforeUpdate() 的代码
        })
    }
}