[译] 如何在 Vue 3 中使用生命周期函数

栏目: IT技术 · 发布时间: 4年前

[译] 如何在 Vue 3 中使用生命周期函数

来源:https://learnvue.co/2020/03/how-to-use-lifecycle-hooks-in-vue3/

作者:Matt Maribojoc

Vue2和Vue3中的生命周期钩子函数非常相似——我们仍然可以访问相同的钩子函数,并且我们仍然希望将它们用于相同的用例。

但是,随着Composition API的引入,我们访问这些钩子函数的方式已经改变。

到本文结束时,你将了解在Vue3中使用生命周期钩子函数的新方法,并开始编写更好的代码。

迎接Vue3系列:

什么是Composition API

如果你还不知道,Vue3 Composition API 附带了一个 setup() 方法。此方法封装了我们的大多数组件代码,并处理了响应式,生命周期钩子函数等。

简而言之,Composition API使我们能够更好地将代码组织为更多的模块化功能,而不是根据属性的类型(方法,计算的数据)进行分离。

[译] 如何在 Vue 3 中使用生命周期函数

在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此,我们不再需要这两个钩子,我们可以简单地将本应有的代码放在 setup() 方法中。

添加我们的生命周期钩子

与Vue3中的大多数功能一样,生命周期钩子是我们必须导入到项目中的东西,这是为了帮助使项目尽可能轻巧。

我们导入生命周期钩子的方式是这样的。

import { onMounted, onUpdated, onUnmounted } from 'vue'

除去 beforeCreatecreated 之外,在我们的 setup 方法中,有9个旧的生命周期钩子,我们可以在 setup 方法中访问

  • onBeforeMount

  • onMounted

  • onBeforeUpdate

  • onUpdated

  • onBeforeUnmount

  • onUnmounted

  • onActivated

  • onDeactivated

  • onErrorCaptured

我们导入它们并在我们的代码中访问它们

import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured } from 'vue'

export default {
  setup() {
    onBeforeMount(() => {
      // ...
    })
    onMounted(() => {
      // ...
    })
    onBeforeUpdate(() => {
      // ...
    })
    onUpdated(() => {
      // ...
    })
    onBeforeUnmount(() => {
      // ...
    })
    onUnmounted(() => {
      // ...
    })
    onActivated(() => {
      // ...
    })
    onDeactivated(() => {
      // ...
    })
    onErrorCaptured(() => {
      // ...
    })
  }
}

从Vue2转换到Vue3

这个方便的Vue2到Vue3的生命周期映射直接来自于Vue3 Composition API 文档,我认为这是一种最有用的方式来查看事情将如何变化,以及我们如何使用它们。

  • beforeCreate -> use setup()

  • created -> use setup()

  • beforeMount -> onBeforeMount

  • mounted -> onMounted

  • beforeUpdate -> onBeforeUpdate

  • updated -> onUpdated

  • beforeDestroy -> onBeforeUnmount

  • destroyed -> onUnmounted

  • errorCaptured -> onErrorCaptured

新的调试钩子函数

们还可以在Vue3中使用两个全新的钩子函数来进行调试。他们是:

  • onRenderTracked

  • onRenderTriggered

这两个事件都带有一个 DebuggerEvent ,它使我们能够知道是什么导致了Vue实例中的重新渲染。

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖项导致组件重新呈现
  }
}

就是这样!

如果你已经有Vue的经验,那么这将是一个非常容易的切换,只需导入钩子并将它们包括在 setup 方法中即可。

推荐阅读:

[译] 如何在 Vue 3 中使用生命周期函数

[译] 如何在 Vue 3 中使用生命周期函数

[译] 如何在 Vue 3 中使用生命周期函数

[译] 如何在 Vue 3 中使用生命周期函数

[译] 如何在 Vue 3 中使用生命周期函数

感谢您的阅读和关注,看完三件事:

如果对你有帮助,帮忙文章右下角点个 在看 如果有什么问题欢迎 留言 交流,还可以 转发 ,这是对作者最大的帮助。 [译] 如何在 Vue 3 中使用生命周期函数

[译] 如何在 Vue 3 中使用生命周期函数


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

并行计算导论

并行计算导论

Ananth Grama、George Karypis、张武、毛国勇、Anshul Gupta、Vipin Kumar、程海英 / 张武、毛国勇、程海英 / 机械工业出版社 / 2005-1-1 / 49.00元

《并行计算导论》(原书第2版)全面介绍并行计算的各个方面,包括体系结构、编程范例、算法与应用和标准等,涉及并行计算的新技术,也覆盖了较传统的算法,如排序、搜索、图和动态编程等。《并行计算导论》(原书第2版)尽可能采用与底层平台无关的体系结构并且针对抽象模型来设计处落地。书中选择MPI、POSIX线程和OpenMP作为编程模型,并在不同例子中反映了并行计算的不断变化的应用组合。一起来看看 《并行计算导论》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HSV CMYK 转换工具
HSV CMYK 转换工具

HSV CMYK互换工具