持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第22天，点击查看活动详情
1.Vue3.0新特性
性能比Vue2.x快1.2~2倍
原因1：
diff方法优化：
vue2中的虚拟dom是全量的对比（每个节点不论写死的还是动态的都会比较）
vue3新增了静态标记（patchflag）与上次虚拟节点对比时，只对比带有patch flag的节点（动态数据所在的节点）；可通过flag信息得知当前节点要对比的具体内容
原因2：静态提升
vue2无论元素是否参与更新，每次都会重新创建然后再渲染
vue3对于不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用即可
原因3：时间侦听器缓存
默认情况下onClick会被视为动态绑定，所以每次都会追踪它的变化
但是因为是同一个函数，所以不用追踪变化，直接缓存起来复用即可
原因4：ssr渲染
按需编译，体积比vue2.x更小
组合API（类似react hooks）
更好的Ts支持
暴露了自定义渲染API
更先进的组件
Fragment:模板可以有多个根元素
区别：
数据双向绑定
VDOM（虚拟DOM）
Fragments
Tree-Shanking的支持
Composition API
数据双向绑定
以前有介绍过 Vue2和Vue3响应式区别_思ۣۖิิۣۖิ❧❦空❧❦的博客-CSDN博客
VDOM
在vue2中，每次更新真实DOM之前都是对虚拟DOM全量对比 vue3中则是只对比带有标记的，这样大大的减少了非动态内容的对比消耗
可以去 Vue Template Explorer 查看如何标记
编辑
Fragments
vue2在template下只能有一个子节点，而vue3可以有多个
同时支持render函数和JSX写法，类似于react中，在render函数里写逻辑代码
Tree-Shanking
相对于vue2来说，减少了打包体积。比如项目当中使用了watch，没有使用computed，那么vue3中就是按需导入watch，再使用，打包时只会打包watch，不会打包compted，而vue2中的实例是单例的，捆绑程序无法检测到当前对象的哪些属性被使用到
Composition API
Vue3 中新增的功能，它的灵感来自于 React Hooks ，是比 mixin 更强大的存在。
可以提高代码逻辑的可复用性，从而实现与模板的无关性；同时使代码的可压缩性更强。另外，把 Reactivity 模块独立开来，意味着 Vue3.0 的响应式模块可以与其他框架相组合。
编辑
如上图，composition-api 把复杂组件的逻辑抽地更紧凑，而且可以将公共逻辑进行抽取。
