vue3.0生命周期以及新增生命周期API

new Vue ()
（新建Vue实例）
i
初始化
事件&生命周期
⬅️
setup方法
beforeCreate ⬅️
⬇️
⬇️
⬇️
初始化
注入&校验
created
⬅️
⬇️
⬇️
⬇️
是否指定
”el“选项
是 ⬇️
⬇️
⬇️
⬇️
⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️
否
是否指定
当调用vm.$mount(el)函数时候
”template“选项？
是 ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️
`否
将template编译
⬇️
将el外部的HTML
到render函数中
⬇️
作为template编译
⬇️
⬇️
⬇️
beforeMount
⬅️
⬅️
⬅️
⬅️
⬅️
⬅️
⬅️
⬅️
⬇️
⬇️
⬇️
创建vm.$el
并用其替换”el“
⬇️
⬇️
⬇️
mounted
⬅️
⬅️
⬅️
⬅️
⬅️
⬅️
⬅️
⬅️
⬇️
⬇️
⬇️
挂载完毕
当 data被修改时首先触发beforeUpdate,接下来 虚拟DOM重新渲染并
⬇️
应用更新，有新的页面会触发updated这个函数
⬇️
⬇️
当调用vm.$destroy()函数时
⬇️
~~beforeDestroy~~(删除)
⬅️
⬅️
⬅️
⬅️
⬇️
⬇️
⬇️
beforeUnmount （改为）
⬇️
解除绑定
销毁子组件以及
事件监听器
⬇️
⬇️
⬇️
~~destroyed~~
((已删除)
⬅️
⬅️
⬅️
⬅️
销毁完毕
⬇️
unmounted
其中beforeDestroy修改为
beforeUnmount ,destroyed改为了unmounted;
这样写纯粹更好的语义化，因为一个组件就是mount，unmount的过程。

vue2和vue3的生命周期对应
vue2 vue3

 beforeCreate
-------->
use setup()
created
---------------------> use setup()
beforeMound ---------------> onBeforeUnmount
mounted------------------>onMounted
beforeUpdate------------>onBeforeUnmouint
updated----------------->onUpdated
beforeDestroy------------>onBeforeUnmount
destroyed--------------------> onUnmounted
activated----------------------->onActivated
deactivated--------------------->onDeactivated
errorCaptured-------------------->onErrorCaptured
//added
onRenderTracked
onRenderTriggered

最后

以上就是喜悦嚓茶为你收集整理的vue3.0生命周期以及新增生命周期API的全部内容，希望文章能够帮你解决vue3.0生命周期以及新增生命周期API所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。