Vue3更新重点

一、基于Proxy的观察者机制

Vue 2.x使用Object.defineProperty，参考文档www.jianshu.com/p/8fe1382ba…vue

Vue 3使用Proxy，对象代理，参考文档segmentfault.com/a/119000001…git

Object.defineProperty的缺陷：github

1）性能：经过遍历对象的属性进行监听，可是属性值也是对象就须要深度遍历。segmentfault

2）没法监听数组：数组的主要操做场景是遍历，若是每个元素都挂载set和get方法，会产生巨大性能消耗数组

3）对属性的添加、删除动做的检测；markdown

4）对数组基于下标的修改、对于 .length修改的检测oop

因此以前数组的对象属性修改，须要手动set来通知页面修改了数据。以下截图post

Proxy的优点：性能

1）能够直接监听对象而非属性，并返回一个新对象。spa

2）能够直接监听数组的变化

3）拦截方式多种多样，速度加倍，节省内存开销

Tree-shaking是用来在打包编译成 bundle 时消除 ES6 Module 语法中未使用到的代码和模块。参考文档juejin.cn/post/684490…

Vue 2.x 的全局 API 好比 nextTick 没法被 TreeShake，因此就算你没有用到这些 API，它们仍是会被打包到你的生产版本的代码包里

Vue 3中，官方团队重构了全部全局 API 的组织方式，让全部的 API 都支持了 TreeShaking

这样打包后的体积会更小

Vue3源码使用ts编写

Typescript官方文档www.tslang.cn/

实际例子，基于vue3开发的小demo，三角生成器