vue3.0（01初识）

目录

• 1.为什么VUE3.0更快了？
  • • 答：1. 其中一个原因就是vue2.0使用的diff算法进行了更多次数的比较
    • 2.hoistStatic 静态提升
    • 3.开启了事件缓存
• 2.vue3.0项目的创建
• 3.组合式API
  • 1.基础使用ref
  • 2.reactive来监听复杂数据类型的变化&分割除了不同的业务逻辑
• 总结

---

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的前景会越来越好。