Vue3的新特性

 

1、响应系统的变动

由原来的Object.defineProperty 的getter 和 setter，改变成为了ES2015 Proxy 作为其观察机制。
Proxy的优势：消除了以前存在的警告，使速度加倍，并节省了一半的内存开销。

Proxy的属性及方法

2、虚拟DOM重写（Virtual DOM Rewrite）

虚拟 DOM 从头开始重写，我们可以期待更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点。

 

 

虚拟DOM重写.png

3、组件渲染的优化（优化插槽生成）

Vue2当中在父组件渲染同时，子组件也会渲染。 Vue3就可以单独渲染父组件、子组件。

 

 

优化插槽生成.png

4、静态树提升（Static Tree Hoisting）

使用静态树提升，这意味着 Vue 3 的编译器将能够检测到什么是静态组件，然后将其提升，从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。

 

 

静态树提升（.png

5、静态属性提升（Static Props Hoisting）

此外，我们可以期待静态属性提升，其中 Vue 3 将跳过不会改变节点的打补丁过程。

 

 

静态属性提升.png

总体来说：1. 更快 2. 更小 3. 更容易维护 4. 更加友好 5. 更容易使用