Vue3更新重點

一、基於Proxy的觀察者機制

Vue 2.x使用Object.defineProperty，參考文檔www.jianshu.com/p/8fe1382ba…

Vue 3使用Proxy，對象代理，參考文檔segmentfault.com/a/119000001…

Object.defineProperty的缺陷：

1）性能：經過遍歷對象的屬性進行監聽，可是屬性值也是對象就須要深度遍歷。

2）沒法監聽數組：數組的主要操做場景是遍歷，若是每個元素都掛載set和get方法，會產生巨大性能消耗

3）對屬性的添加、刪除動做的檢測；

4）對數組基於下標的修改、對於 .length修改的檢測

因此以前數組的對象屬性修改，須要手動set來通知頁面修改了數據。以下截圖

Proxy的優點：

1）能夠直接監聽對象而非屬性，並返回一個新對象。

2）能夠直接監聽數組的變化

3）攔截方式多種多樣，速度加倍，節省內存開銷

二、完美支持tree-shaking

Tree-shaking是用來在打包編譯成 bundle 時消除 ES6 Module 語法中未使用到的代碼和模塊。參考文檔juejin.cn/post/684490…

Vue 2.x 的全局 API 好比 nextTick 沒法被 TreeShake，因此就算你沒有用到這些 API，它們仍是會被打包到你的生產版本的代碼包裏

Vue 3中，官方團隊重構了全部全局 API 的組織方式，讓全部的 API 都支持了 TreeShaking

這樣打包後的體積會更小

三、完美支持Typescript

Vue3源碼使用ts編寫

Typescript官方文檔www.tslang.cn/

四、Composition API

實際例子，基於vue3開發的小demo，三角生成器

github.com/hellangel20…