【vue3学习系列】对比vue2生命周期做了哪些改变,vue3初学者快来看看

前言

看了下官方的生命周期的说明,感觉讲的不算太清晰,所以个人就去百度研究了下,把理解到的记录在这篇博客,方面日后查看。

建议先对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>

其他钩子只是改了名称

除了上面俩个被去除,其他的钩子函数只是改了个名称

beforeMountonBeforeMount
mountedonMounted
beforeUpdateonBeforeUpdate
updatedonUpdated
beforeDestroyonBeforeUnmount
destroyedonUnmounted

使用方式例如:

<script setup>
import { onMounted } from 'vue';

onMounted(()=>{
  console.log('onMounted');
})
</script>

剔除vue2后的生命周期图

在官方图的基础上把vue2相关的东西剔除后(PS:找表弟做的图)

请添加图片描述


其他钩子函数

keepalive

activatedonActivated
deactivatedonDeactivated

错误捕获

errorCapturedonErrorCaptured

其他的一些钩子去官方文档看看即可

快速官方文档定位

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值