来源: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使我们能够更好地将代码组织为更多的模块化功能,而不是根据属性的类型(方法,计算的数据)进行分离。
在旧的 beforeCreate
钩子函数之后和 created
的钩子函数之前立即调用 setup
方法。因此,我们不再需要这两个钩子,我们可以简单地将本应有的代码放在 setup()
方法中。
添加我们的生命周期钩子
与Vue3中的大多数功能一样,生命周期钩子是我们必须导入到项目中的东西,这是为了帮助使项目尽可能轻巧。
我们导入生命周期钩子的方式是这样的。
import { onMounted, onUpdated, onUnmounted } from 'vue'
除去 beforeCreate
和 created
之外,在我们的 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
方法中即可。
推荐阅读:
感谢您的阅读和关注,看完三件事:
如果对你有帮助,帮忙文章右下角点个 在看 如果有什么问题欢迎 留言 交流,还可以 转发 ,这是对作者最大的帮助。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- ReactNative入门教程-组件生命周期函数
- 【PHP 每日函数】第 02 周期
- 【PHP 每日函数】第 03 周期
- Vue 组件生命周期钩子函数
- [译] 如何在 Vue 3 中使用生命周期函数
- [三元学React]React组件的生命周期函数
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
公众号运营实战手册
中信出版社 / 2018-11 / 58
作者粥左罗在刚入行做新媒体的一年时间里,就写了100篇阅读量10万+的公众号文章,但是在此之前,他足足花了两个月的时间研究公众号运营和爆款文章的逻辑和打法。 这本书就是他总结和归纳自己公众号写作和运营的全部秘诀和技巧,是一本行之有效的实战指南。 从如何注册一个公号,给公号起什么名字? 多长时间更新一次为好? 到如何找选题,如何积累爆款素材? 如何编辑内容,如何做版面设......一起来看看 《公众号运营实战手册》 这本书的介绍吧!