1.5　Vue.js 3.x的新變化

Vue.js 3.x并沒有延用Vue.js 2.x版本的代碼，而是從頭重寫了整個框架，代碼采用TypeScript進行編寫，新版本的API全部采用普通函數，在編寫代碼時可以享受完整的性能推斷。

與Vue.js 2.x版本相比，Vue.js 3.x具有以下新變化。

1．重構響應式系統

Vue.js 2.x利用Object.defineProperty()方法偵查對象的屬性變化，該方法有一定的缺點：

（1）性能較差。

（2）在對象上新增屬性是無法被偵測的。

（3）改變數組的length屬性是無法被偵測的。

Vue.js 3.x重構了響應式系統，使用Proxy替換Object.defineProperty。Proxy被稱為代理，它的Proxy優勢如下：

（1）性能更優異。

（2）可直接監聽數組類型的數據變化。

（3）監聽的目標為對象本身，不需要像Object.defineProperty一樣遍歷每個屬性，有一定的性能提升。

（4）Proxy可攔截apply、ownKeys、has等13種方法，而Object.defineProperty不行。

2．更好的性能

Vue.js 3.x重寫了虛擬DOM的實現，并優化了編譯模板，提升了組件的初始化速度，更新的性能提升了1.3~2倍，服務器端渲染速度提升了2~3倍。

3．tree-shaking支持

Vue.js 3.x只打包真正需要的模塊，刪除了無用的模塊，從而減小了產品發布版本的大小。而在Vue.js 2.x中，很多用不到的模塊也會被打包進來。

4．組合API

Vue.js 3.x中引入了基于函數的組合API。在引入新的API之前，Vue還有其他替代方案，它們提供了諸如Mixin、HOC（高階組件）、作用域插槽之類的組件之間的可復用性，但是所有方法都有自身的缺點，因此它們未被廣泛使用。

（1）一旦應用程序包含一定數量的Mixins，就很難維護。開發人員需要訪問每個Mixin，以查看數據來自哪個Mixin。

（2）HOC模式不適用于.vue單文件組件，因此在Vue開發人員中不被廣泛推薦或使用。

（3）作用域插槽的內容會封裝到組件中，但是開發人員最終擁有許多不可復用的內容，并在組件模板中放置了越來越多的插槽，導致數據來源不明確。

組合API的優勢如下：

（1）由于API是基于函數的，因此可以有效地組織和編寫可重用的代碼。

（2）將共享邏輯分離為功能來提高代碼的可讀性。

（3）可以實現代碼分離。

（4）在Vue應用程序中更好地使用TypeScript。

5．Teleport（傳送）

Teleport是一種能夠將模板移動到DOM中Vue應用程序之外的其他位置的技術。像modals和toast等元素，如果嵌套在Vue的某個組件內部，那么處理嵌套組件的定位、z-index樣式就會變得很困難。很多情況下，需要將它與Vue應用的DOM完全剝離，這樣管理起來會容易很多，此時就需要用到Teleport。

6．Fragment（碎片化節點）

在Vue 2.x中，每個組件必須有一個唯一的根節點，所以，寫每個組件模板時都要套一個父元素。在Vue 3.x中，新增了標簽元素<Fragment></Fragment>，從而不再限于模板中的單個根節點，組件可以擁有多個節點。這樣做可以減少標簽層級，減小內存占用。

7．更好的TypeScript支持

Vue.js 3.x是用TypeScript編寫的庫，可以享受自動的類型定義提示。JavaScript和TypeScript中的API相同，從而無須擔心兼容性問題。結合使用支持Vue.js 3.x的TypeScript插件，開發更加高效，還可以擁有類型檢查、自動補全等功能。