1. 搞机Pro网首页
  2. 综合

vue3 生命周期（vue3.0的生命周期）

苍老是一段年华 • • 综合

vue2 和 vue3 的生命周期执行顺序（注意vue3变量定义优先级高于vue2）：

vue3 生命周期（vue3.0的生命周期）

生命周期

看下 vue3 与 vue2 的生命周期图（看不看也无所谓有个印象就可以）：

vue3 生命周期（vue3.0的生命周期）

vue3

vue3 生命周期（vue3.0的生命周期）

vue2

一、图示vue2.0（主要8个阶段）到vue3.0（主要6个阶段）改变​​​​​​，使用了组合API setup()

beforeCreate -> use setup()
created -> use setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeUnmount -> onBeforeUnmount
unmounted -> onUnmounted

errorCaptured -> onErrorCaptured
renderTracked -> onRenderTracked
renderTriggered -> onRenderTriggered
activated -> onActivated
deactivated -> onDeactivated

二、解析图示的改变

1、去掉了vue2.0中的 beforeCreate 和 created 两个阶段，同样的新增了一个 setup
2、beforeMount     挂载之前      改名   onBeforeMount
3、mounted         挂载之后      改名   onMounted
4、beforeUpdate    数据更新之前   改名   onBeforeUpdate
5、updated         数据更新之后   改名   onUpdated
6、beforeDestroy   销毁前        改名   onBeforeUnmount
7、destoryed       销毁后        改名   onUnmounted
8、errorCaptured   报错          改名   onErrorCaptured

三、官方对生命周期钩子的解释

你可以通过在生命周期钩子前面加上 “on” 来访问组件的生命周期的钩子。

下表包含如何在 setup () 内部调用生命周期钩子：
选项式 API Hook inside setup
beforeCreate Not needed*
created Not needed*
beforeMount onBeforeMount
mounted onMounted
beforeUpdate onBeforeUpdate
updated onUpdated
beforeUnmount onBeforeUnmount
unmounted onUnmounted
errorCaptured onErrorCaptured
renderTracked onRenderTracked
renderTriggered onRenderTriggered

注意： setup 是围绕 beforeCreate 和 created

您可能感兴趣：

大厂前端项目开发流程（前端项目实战案例）

Linux字符设备驱动（linux字符设备驱动开发）

spring boot poi excel 导出（springboot实现excel导入和导出）

vue实现数据绑定（vue绑定数据的两种方式）

磁盘的动态扩容和缩减区别（磁盘的动态扩容和缩减分辨率）

docker镜像操作（常用docker镜像）

赞 (0)
苍老是一段年华苍老是一段年华
0

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

发表评论

登录后才能评论