vue3生命周期详解(vue2与vue3的生命周期对比)

 分类:vue教程时间:2022-06-13点击: 2022前端视频教程(自学必看)

vue3生命周期有几个阶段?主要有6个阶段。vue2和vue3的生命周期执行顺序,注意vue3变量定义优先级高于vue2。Vue3去掉了vue2.0中的 beforeCreate 和 created 两个阶段,同样的新增了一个 setup,本文是通过vue2与vue3图解来对vue3生命周期详解。

一、vue2和vue3的生命周期执行顺序:

vue2和vue3的生命周期执行顺序

总结:vue3变量定义优先级高于vue

二、vue3生命周期图解,看下vue3与vue2的生命周期图对比:

1、vue3生命周期图解如下:

vue3生命周期图解

2、vue2生命周期图解如下:

vue2生命周期图解

3、图示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

4、解析图示的改变

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

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

你可以通过在生命周期钩子前面加上 “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

除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: