持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情
来看官方对vue3新特性的介绍：
- 重写双向数据绑定
- VDom性能瓶颈
- Fragments
- Tree-Shaking的支持
- Compositions API
本文这来逐一分析具体每一个新特性做了什么优化和改进
重写双向数据绑定
vue2中基于 defineProperty()来给每个属性添加getter和setter劫持整个对象，从而实现响应式
vue3则是采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历
Proxy的监听是针对一个对象的，那么对这个对象的所有操作会进入监听操作，这就完全可以代理所有属性了
因此该方式也解决了Vue2遗留的问题，可以监听动态新增的属性，可以监听删除的属性，也可以监听数组的变化，包括索引和length属性。
VDom性能瓶颈
本次，Vue3在diff算法中相比Vue2增加了静态标记
在Vue2中，每次更新diff，都是全量比对。但现在Vue3只对比带有标记的，这样可以大大减少非动态内容的对比消耗。
如下图，是Vue3 编译后的 Vdom 是这个样子的，新增加了patch flag 标记： 1 /* TEXT */，因此当
diff 算法走到 _createBlock 函数的时候，会忽略所有的静态节点，只对有标记的动态节点进行对比，而且在多层的嵌套下依然有效。
Fragments
相比于Vue2,Vue3 允许我们支持多个根节点，同时还新增了Suspense teleport 和 多 v-model 用法
Tree-shaking的支持
Tree shaking简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码
在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被使用到。
而Vue3中引入tree shaking特性，将全局 API 进行分块。对于不使用的功能，就不会包含在你的基础包中，从而大大减少打包体积。
Compositions API
Vue2使用的是Option ApI。Option ApI也就是选项API,通过定义methods，computed，watch，data等属性和方法，共同处理页面逻辑。因此，当组件变得复杂，就会导致对应属性的列表也会增加，这样就会导致组件难以阅读和理解。当然，如果是小型组件的话，也是十分友好的。
Vue3增加了Composition API的使用，Composition API是组件根据逻辑功能来组织的，一个功能所定义的所有API都放到一起，从而更加的高内聚，低耦合。并且对tree-shaking友好，代码也更容易压缩。Composition API见不到this的使用，减少了this指向不明的情况。
如下图，可以清晰的看到在逻辑组织和逻辑服用方面，Composition API的使用，是优于Option ApI的。
