vue3.0(01初识)


1.为什么VUE3.0更快了?

答:1. 其中一个原因就是vue2.0使用的diff算法进行了更多次数的比较

在这里插入图片描述

上图就是vue2.0diff算法的一次比较过程,可以知道由于比较DOM树的结构,没有变量存储的DOM也进行了多余的比较。

在这里插入图片描述

上图是VUE3.0进行diff算法比较的过程,只给可能变化的节点添加了标记,到时候数值变化,直接进行更新就可以了,减少了比较的次数。

2.hoistStatic 静态提升

在这里插入图片描述
一句话来说就是vue2dom元素的利用率要低于vue3.0的,所以vue3.0渲染的次数少了,更新的速度就更加的快速了。

3.开启了事件缓存

在这里插入图片描述
就是我们绑定的方法,也会被当做动态属性来进行监听,但是方法是不需要进行监听的,所以我们把事件进行了缓存,就不需要追踪变化了,以此来提高了vue3.0的速度。

2.vue3.0项目的创建

在这里插入图片描述

3.组合式API

1.基础使用ref

大大大达到

通过组合api的入口函数setup可以来声明变量和方法,供在模板中进行调用,ref声明的变量是可以追踪变化的,但是有一点需要注意,ref生成的是一个对象,目的是同意变量的类型为饮用型。

2.reactive来监听复杂数据类型的变化&分割除了不同的业务逻辑

在这里插入图片描述
ref只可以用来监听普通的数据类型的变化,这里利用reactive来监听犊砸数据类型的变化。并且把不同业务逻辑的代码进行了切分,使业务逻辑模块更加的清晰,方便后期的维护迭代。

总结

提示:这里对文章进行总结:
这边博文仅仅是对vue3.0入门使用的一点理解,其实本人对vue3.0是有很大的期待的,见识到了vita的速度,也是感到十分的震惊的,速度真是快的可怕。相信vue3.0的前景会越来越好。


    感谢您花时间阅读此篇文章,如果您觉得看了这篇文章之后心情还比较高兴,可以打赏一下,请博主喝上一杯咖啡,让博主继续码字……
    本文版权归作者和博客园共有,来源网址:https://blog.csdn.net/weixin_46498102 欢迎各位转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接
原文地址:https://www.cnblogs.com/jackson1/p/14508637.html