脚本宝典收集整理的这篇文章主要介绍了详细聊聊Vue生命周期的那些事,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
如今学习Vue的人越来越多了,Vue框架或React框架的学习也成为开发了前端开发人员的必备技能,今天我们就来聊聊Vue中的生命周期函数,Vue中生命周期函数的参考价值很高,让我们来一起认识它吧~
在介绍生命周期之前,我们需要知道在Vue中要渲染一块页面内容的时候,会有下面这几个过程:
当我们绑定的数据进行更新的时候,又会产生以下这些过程:
当我们清空页面内容时,还有:
Vue为实例提供的生命周期函数一共有8个:
关于实例的生命周期,大家还可以参考官方的图例
其它的生命周期函数还有activated(), deactivated(), errorCaptured()
keep-alive独有的生命周期分别为activated和deactivated。
用keep-alive包裹的组件在切换时不会进行销毁,而是缓存在内存中并执行deactived钩子函数,命中缓存渲染后会执行activated钩子函数
errorCaptured()钩子当在子组件内捕获到错误时会调用这个钩子函数。
Vue3中的生命周期在使用Options API和ComposITion API会有所不同。
尤大大为什么要把他改成这样,他的回复是这很大程度上是为了更好的命名约定,对应的中文正是卸载组件和前面的挂载组件契合不少。
在Composition API中使用钩子函数,我们只需要在钩子函数前面添加“on”,并在SETUP函数内部即可,它就会变成这样👇
我们只需要引入这些钩子函数就可以使用啦
Vue3的钩子函数如下:
如果你注意观察,你会发现两个生命周期函数消失了,beforeCreate()和created()不会出现在Composition API中,我们有setup()方法即可,setup()方法出现在beforeCreate()和created()之间。
⚽这篇文章主要介绍了Vue中的生命周期函数,相信你一定有所收获~
到此这篇关于Vue生命周期的那些事的文章就介绍到这了,更多相关Vue生命周期内容请搜索脚本宝典以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本宝典!
以上是脚本宝典为你收集整理的详细聊聊Vue生命周期的那些事全部内容,希望文章能够帮你解决详细聊聊Vue生命周期的那些事所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。