迹忆客 专注技术分享

当前位置:主页 > 学无止境 > WEB前端 >

Vue 生命周期钩子详解

作者:迹忆客 最近更新:2022/05/13 浏览次数:

与其他框架一样,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() 的代码
        })
    }
}

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

总结

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

除非注明转载,本站文章均为原创或翻译,欢迎转载,转载请以链接形式注明出处

本文地址:

迹忆客

专注技术分享,项目实战分享!

技术宅 乐于分享 7年编程经验
社交账号
  • https://www.github.com/onmpw
  • qq:1244347461

热门文章

教程更新

热门标签

Vue
扫码一下
查看教程更方便