前言
看了下官方的生命周期的说明,感觉讲的不算太清晰,所以个人就去百度研究了下,把理解到的记录在这篇博客,方面日后查看。
建议先对vue2的生命周期烂熟于心:【vue回顾系列】25-一图看懂生命周期,并教你怎么口述出来
官方生命周期图
首先我们来看看官方的图片,可以看到旧的钩子函数还是混在里面,因为此时的vue3还支持vue2的opinion api写法。
下面就图分析
分析
去除beforeCreate与created
如果我们在vue3的setup写法中调用这俩个钩子,会提示钩子 is not defined
。
我们从图中可知,setup的执行是在原先beforeCreate钩子之前,与vue2不同的是,vue3在setup执行的阶段,实例就已经创建完毕,我们就可以使用composition api了。而在vue2中option api要在created钩子中才能使用。
所以在vue3中,原先的beforeCreate和created钩子毛线都没用了,所以被去掉。而对options api提供的这俩个钩子其实已经不是vue2形式的了,而是vue3为了照顾vue2写法暴露出来的(感觉像是模拟出来的?改天我去瞅瞅源码)。
<script setup>
if (true) {
console.log('可以写js语句');
}
const showName = ()=> {
console.log('可以调用函数');
}
showName()
</script>
其他钩子只是改了名称
除了上面俩个被去除,其他的钩子函数只是改了个名称
旧 | 新 |
---|---|
beforeMount | onBeforeMount |
mounted | onMounted |
beforeUpdate | onBeforeUpdate |
updated | onUpdated |
beforeDestroy | onBeforeUnmount |
destroyed | onUnmounted |
使用方式例如:
<script setup>
import { onMounted } from 'vue';
onMounted(()=>{
console.log('onMounted');
})
</script>
剔除vue2后的生命周期图
在官方图的基础上把vue2相关的东西剔除后(PS:找表弟做的图)
其他钩子函数
keepalive
旧 | 新 |
---|---|
activated | onActivated |
deactivated | onDeactivated |
错误捕获
旧 | 新 |
---|---|
errorCaptured | onErrorCaptured |