vue3.x相对于vue2.x生命周期改动

vue3.x已经正式发布了,部分小伙伴已经用了vue3.x开发,部分小伙伴还在观望中,下面是两个影响比较大的改动

1、beforeDestroy和destroyed不能用了。

这个应该是vue2.x项目升级为vue3.x项目影响最大的地方,突然发现项目中beforeDestroy和destroyed不会被调用了,可以批量替换为beforeUnmount和unmounted。

2、新增了 setup 函数。

执行 setup 时,组件实例尚未被创建。因此你在setup中不能使用this,同时你只能访问以下 property:props、attrs、slots、emit,将无法访问以下组件选项:data、computed、methods、refs。

setup函数有两个参数props和context。props 是响应式的,当传入新的 prop 的时侯,它将被更新。context可以用来访问上面可以使用的属性,相当于this。

最后,上两张硬核的图
vue3.x生命周期

生命周期函数对比

posted @ 2021-10-21 23:12  杂学不精  阅读(63)  评论(0)    收藏  举报