Vue3源码（一）：导读：Vue3.0的优化

一、数据劫持优化

1. vue3.0:使用proxyAPI。优点如下：

   • 使用proxyAPI 劫持整个对象，自然可以检测到对象属性的增删。
   • 尽管proxyAPI并不能监听到内部深层次的对象变化，但是可以在getter中递归响应式。也就是说，只有真正访问到内部对象才会变成响应式，而不是无脑递归。

2. vue2.0:Object.defineProperty这个API拦截getter和setter。缺点如下：

   • 必须要提前知道需要拦截的key是什么，不能检测对象属性的添加和删除。
   • 对于嵌套层级较深的对象，无脑递归，会有相当大的性能负担。

二、语法API优化

1.vue3.0:使用compositionAPI。将某个逻辑关注点的相关代码全部放在一个函数中，不需要切换寻找 2.vue2.0:使用optionsAPI,虽然好上手，但是修改逻辑关注点时，需要上下不断切换寻找。

三、编译优化

1.vue3.0：编译阶段生成blockTree,也就是一个基于动态节点指令切割的嵌套区块，会只diff这个动态数据所在的节点，将性能从由模板大小相关优化为与动态内容的数量相关。

2.vue2.0:重新渲染的粒度是组件级的，在单个组件内部，需要遍历组件的整个VNode树，比如我们要更新的组件有10个div，但是只有一个div是动态数据，整个diff过程会遍历10个div,浪费性能。

四、 更好的 TypeScript 支持：

vue3.0：在设计时充分考虑了 TypeScript 的特性和使用方式，提供了更好的 TypeScript 支持。Vue 3 中的代码基于 TypeScript 编写，并且提供了更准确的类型推导、支持 Composition API 的类型推断、更好的 IDE 支持等。

五、更小的包体积

Vue 使用了模块化的架构，使得你可以根据需求进行选择性的引入功能，减小了最终打包后的包体积。此外，Vue 3 还通过优化编译器和删除不常用的 API，进一步减少了整体的包大小。