1、响应系统的变动
由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。
Proxy的优势：消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。
2、虚拟DOM重写（Virtual DOM Rewrite）
虚拟 DOM 从头开始重写，我们可以期待更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点。
3、组件渲染的优化（优化插槽生成）
Vue2当中在父组件渲染同时，子组件也会渲染。 Vue3就可以单独渲染父组件、子组件。
4、静态树提升（Static Tree Hoisting）
使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。
5、静态属性提升（Static Props Hoisting）
此外，我们可以期待静态属性提升，其中 Vue 3 将跳过不会改变节点的打补丁过程。
总体来说：1. 更快 2. 更小 3. 更容易维护 4. 更加友好 5. 更容易使用
vdom
1. 性能瓶颈
新vdom生成：
当数据更新时，虽然vue可以定位到最小更新粒度为组件级别，但在组件级别内，还是需要重新遍历模板生成新的vdom，更新粒度不够小。
diff算法：diff的工作量和组件模板大小成正相关。即使模板内只有少量的动态节点，也需要遍历整个组件去执行diff。
总结：vdom的更新粒度不够灵活，导致生成新的vnode和新旧vnode diff过程中，做了很多无用功，导致浪费性能.
2. 原因
vdom是从react而来的，jsx和手写的render function是完全动态的，过度的灵活性导致无法收集优化的信息，即你无法解读js的代码，来区分静态节点和动态节点。
如下图，很难识别出：只有div下的第二个p是动态节点。
3. 解决方案
react时间分片
在动态节点和数据的量都很大时，那么在数据更新时，js线程就会用很长的时间来执行vdom的相关计算，如果超过了16ms，造成交互或动画等等卡顿现象。而时间分片就是把vdom的大量计算分成多个小任务，保证每个小任务在16ms内执行完，从而不会阻塞用户交互，避免卡顿现象。
即react承认vdom的这些缺点，然后它从其他的层面来弥补缺点带来的问题。
vue缩小更新粒度
最大化利用的模板信息，把更新的粒度从组件缩小到代码块。
即从组件模板中提取出动态节点、动态代码块，做diff时，只需要比较这些动态区域，而忽略掉静态节点，从而提升性能。
再比如一个节点仅仅
class属性为动态的，那么只需要diff这一个属性即可。进一步提升了性能。
总结：vdom的更新性能将与动态内容的数量相关，而不是模板整体大小。
function-based API
优势1：更好的支持TS类型推导
优势2：Tree-shaking友好
常用的API value、computed、watch等都是从vue中使用import引进来的，所以支持tree-shaking。即如果没有使用这些api，那么这些相应的代码就不会被打包，缩小了文件大小。
优势3：代码更容易被压缩
对象属性一般是不会被压缩的，而变量名是可以被压缩的
优势4：逻辑复用
逻辑复用有很多种方案，都有一些缺点：
1. mixins
- 命名空间冲突（多个mixins，不能保证变量名不会冲突）
- 数据来源不清晰（多个mixins时，使用的变量就不易分辨它的来源）
2. 高阶组件
- props命名空间冲突
- props数据来源不清晰
- 额外的组件实例性能消耗
3. 作用域插槽
- 额外的组件实例性能消耗
而在vue3中逻辑复用会有不同的方式：
可以发现和
react hook逻辑封装形式很像，就是在组件内定义响应式的变量，并封装变量更改的逻辑，在最后把变量暴露出来，供其他组件使用。