「Vue系列」之setup和旧生命周期谁更快?

1,371 阅读4分钟

这是我参与11月更文挑战的第3天,活动详情查看:2021最后一次更文挑战


老规矩总结放前面:

    vue3setup函数中的生命周期去除了created和beforeCreate,但是向下兼容还是可以在外面使用。但是执行时机在setup函数之后,而且子组件的所有生命周期包括向下兼容的都早于父组件的向下兼容的生命周期。

    相信大佬们都知道vue3相比于之前的版本在响应式的实现原理上做出了新的改变,就是使用proxy代替defineProperty。代替的好处有很多我也不详细说了,我觉得最大的改变就是可以实现对数组的直接监听,而不用对数组的方法进行重写。

下面说说我在使用vue3.0过程中遇到的一些奇奇怪怪的问题,如果有什么不对的地方请大佬指出,不胜感激!💐💐

1.setup的执行时机 关于setup里面的生命周期,我大概举了几个例子,3.0和2.0的区别无非就是setup函数里面没有了created和beforeCreate,然后别的生命周期都在前面加上on区分,别的基本上没有变化。

    当时我在看生命周期的时候也看到过一些相关的文章,有一些老哥为什么不自己写几行代码看看每一个生命周期到底什么时机执行而是人云亦云地说setup执行时机位于beforeCreate和created之间嘞?实践出真知呀💦

截屏2021-11-22 下午9.09.04.png 截屏2021-11-22 下午9.08.19.png

2.使用reactive或者ref声明的响应式变量直接替换导致响应式失效的情况 在之前使用vue2.0接收接口返回的数据的时候,我一般都是在data生命一个对象,然后直接this.对象 等于接口返回的值(不好意思我是个菜鸡,代码写的一点都不优雅)。 所以使用3.0我下意识就直接套用了,这样就出现了问题。

    首先出现的问题就是 xx is read-only,这时候我觉得自己真是傻狗,我用const声明的引用类型数据,内存地址是不能发生变化的。我直接等那不是修改了吗,这样肯定不行。然后我就把const改成let,好了这样就不会报错了,但是又出现新的问题了。

    我直接替换之后,发现页面并没有更新,我以为是数据没有接受,我打印之发现对象或数组的内容的确发生了变化,那页面没有随之更新的原因是什么嘞? 后来我在打印初始状态的数组或对象和替换之后的数组或对象后发现了一些端倪,在直接替换之后,原来的指针指向的已经不是一个proxy对象,vue3.0就是通过proxy来实现对数组和对象的数据劫持,替换之后都不是proxy对象了,响应式自然就失效了。(我个人觉得这样理解还是有点牵强差点意思,后续我研究研究源码再更新吧)

image.png

image.png

    这时候难免就会有新的问题了,🤔️那为什么3.0不能这样操作2.0这样操作就没有问题呐? 这是因为2.0使用的是defineProperty对根节点data进行数据劫持,我们声明的任何变量都是在data的基础上做为data对象的一个key,所以即使我们整体替换,也会被defineProperty接触到触发set方法进而实现更新。 其实在3.0也一样,如果我们也声明一个data或者任意名字的对象作为根节点,然后在这个对象的基础上添加key,然后整体替换新添加的key的内容也是会被proxy劫持到进而实现响应式更新。

    其实这个问题的出现还是跟我的代码编写习惯不好有关系,所以建议大家在开发的过程中引入eslint代码检查,多看看社区优秀的代码库,这样在硬实力方面也能避免一些莫名其妙的问题的产生。

vue3.0还有很多有意思的api,之后慢慢研究了。

最后祝各位大佬学习进步,事业有成!🎆🎆🎆