vue3(二)生命周期

147 阅读1分钟

vue3生命周期

简单来说就是组件从创建到销毁的一个过程
vue3的组合式api(Composition API)是没有vue2里的 beforeCreate 和 created 这两个生命周期的

1setup()  在创建组件之前执行,在 beforeCreate 和 created 之前执行  
2onBeforeMount()  在组件渲染之前执行,在这一步的时候根元素还不存在  
3onMounted()  组件第一次渲染完成后执行,可以访问dom  
4onBeforeUpdate()  组件更新之前执行    
5onUpdated()  组件更新完成之后执行   
6onBeforeUnMount()  组件卸载之前执行   
7onUnMounted()  组件卸载之后执行  
8onActivted()  被 <keep-alive> 中的组件,会多出两个生命周期钩子函数。被激活时执行。  
9onDeactivated()  比如从 A 组件,切换到 B 组件,A 组件消失时执行。  
10onErrorCaptured()  当捕获一个来自子孙组件的异常时激活钩子函数。

vue2,3生命周期对比


  Vue2            vue3
beforeCreate   =>  setup()
created        =>  setup()
beforeMount    =>  onBeforeMount
mounted        =>  onMounted
beforeUpdate   =>  onBeforeUpdate
updated        =>  onUpdated
beforeDestroy  =>  onBeforeUnmount
destroyed      =>  onUnmounted
activated      =>  onActivated
deactivated    =>  onDeactivated
errorCaptured  =>  onErrorCaptured