Vue3的新特性
1、响应系统的变动
由原来的Object.defineProperty 的getter 和 setter,改变成为了ES2015 Proxy 作为其观察机制。
Proxy的优势:消除了以前存在的警告,使速度加倍,并节省了一半的内存开销。
2、虚拟DOM重写(Virtual DOM Rewrite)
虚拟 DOM 从头开始重写,我们可以期待更多的编译时提示来减少运行时开销。重写将包括更有效的代码来创建虚拟节点。
![](https://upload-images.jianshu.io/upload_images/7374915-dad9984cc4dd6a19.png?imageMogr2/auto-orient/strip|imageView2/2/w/1080/format/webp)
虚拟DOM重写.png
3、组件渲染的优化(优化插槽生成)
Vue2当中在父组件渲染同时,子组件也会渲染。 Vue3就可以单独渲染父组件、子组件。
![](https://upload-images.jianshu.io/upload_images/7374915-ffa34d6ba58661ff.png?imageMogr2/auto-orient/strip|imageView2/2/w/800/format/webp)
优化插槽生成.png
4、静态树提升(Static Tree Hoisting)
使用静态树提升,这意味着 Vue 3 的编译器将能够检测到什么是静态组件,然后将其提升,从而降低了渲染成本。它将能够跳过未整个树结构打补丁的过程。
![](https://upload-images.jianshu.io/upload_images/7374915-45d7b4f1c51e4394.png?imageMogr2/auto-orient/strip|imageView2/2/w/800/format/webp)
静态树提升(.png
5、静态属性提升(Static Props Hoisting)
此外,我们可以期待静态属性提升,其中 Vue 3 将跳过不会改变节点的打补丁过程。
![](https://upload-images.jianshu.io/upload_images/7374915-7e63fe42115144fa.png?imageMogr2/auto-orient/strip|imageView2/2/w/800/format/webp)
静态属性提升.png
总体来说:1. 更快 2. 更小 3. 更容易维护 4. 更加友好 5. 更容易使用