Vue進階（幺貳玖）：初探Vue3

Vue2持續更新過程中，Vue3已經呼之欲出了，目前Vue官網已經顯示Vue3在beta進度了。下面我們主要講解下Vue3的一些新特性。

實踐

升級 Vue 3.0 項目

目前創建 Vue 3.0 項目需要通過插件升級的方式來實現，vue-cli 還沒有直接支持，我們進入項目目錄，並輸入以下指令進行升級。

cd vue-next-test
vue add vue-next

不變點

• 模板語法保持不變
• 不需要使用 TypeScript
• 沒有 Class API
• 選項式聲明組件仍然保留
• 會有專門支持 IE11 的版本
• 大部分組件庫可以繼續使用
• 大部分現有代碼可以繼續使用
• 之前積累的知識大部分沒有過期
• 老系統也能得到一定支持

新特性

• 更快更省
• 完全 TypeScript 重構
• Composition API
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

1.1 更快更省

Object.defineProperty >  Proxy

• 不需要遍歷並修改原始對象
• 可以完全覆蓋對象/數組操作
• 可以覆蓋更多的數據類型
• 觀察更加精準，消耗更少
• 原生 API，速度超快
• 內存減半，速度加倍
• 重構 Virtual DOM
• 生成的代碼更容易被 JS 引擎理解、優化
• 動靜結合，精確編譯和重新渲染動態的部分
• 優化 <slot> 生成（默認編譯爲函數）
• 支持 tree-shaking，有效減小打包體積
• 速度加快6倍
• 可以告別 Time slicing
• 支持更大規模的應用
• 編譯後的代碼儘可能簡潔

1.2 完全 TypeScript 重構

• 讓 Vue 開發團隊更輕鬆
• 架構更鬆散靈活，閱讀源碼更輕鬆
• 可以獨立使用 Vue 內部模塊
• IDE 支持更好

1.3 Composition API

概要：將 2.x 中與組件邏輯相關的選項以 API 函數的形式重新設計。
曾用名：Vue Function-based API
取代了早先的 Class API
著作權歸作者所有。
商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
鏈接:http://caibaojian.com/welcome-vue3.html
來源:http://caibaojian.com

Vue 2 對象式組件的問題

• 難以複用邏輯代碼
• 難以拆分超大型組件
• 代碼無法被優化/壓縮
• 難以進行數據類型推導

Composition API 如何解決這些問題

• 純函數，方便 JS 運行時理解
• 輕鬆完成 tree-shaking
• 單一組件的代碼可以統合在一起
• 不同組件間，可以對象解構及重命名避免命名空間衝突
  著作權歸作者所有。
  商業轉載請聯繫作者獲得授權,非商業轉載請註明出處。
  鏈接:http://caibaojian.com/welcome-vue3.html
  來源:http://caibaojian.com

升級策略

提供兼容版本和標準版本

• 兼容版本中，setup() 優先使用
• 一些屬性可以繼續保留，比如 template
• 數據、方法、生命週期都將被廢棄
• 開發者可以漸進式的將代碼升級到新版

使用 Composition API

爲什麼 Vue 3.0 要這麼做

• UI 語言，需要很強的表達力
• UI 組件，最常見的需求是“組合”
• 能夠把優化交給 JavaScript 運行時
• 能夠兼容老版本

“制定稅收法律時，可以使用線性稅率，也可以使用遞進式稅率。評價哪種稅收制度更公正，要看收入水平不同的人，誰繳的稅更多。設計 API 也類似，要看哪些開發人員需要面對更復雜的問題。

作爲 API 設計人員，我們的目標和稅收系統的謀劃者不同：我們希望儘可能少徵稅，而不是多徵稅。

所以，如果 90% 的用戶能夠留在低稅率階段，只有 10% 的用戶需要多繳稅，在我看來，比大家平攤稅負要好得多。

正因爲如此，Vue 的 API 是“分層”的：模版和對象式 API 可以滿足大部分使用場景，工作得很好，只需要用戶投入很少的學習時間。Composition API 和渲染函數需要“繳納更多的稅賦”，但是隻有少數開發者需要負擔，而他們也將從系統中獲取更多收益。”

1.4 其它改進

• 組件裏可以有多個根節點（<fragment>）
• v-model 支持多屬性
• 支持 <portal> 將子樹在其它地方渲染
• 可以自定義渲染函數，方便擴展到其它平臺
• 增加了全局 API 的命名空間
• 將 props 變爲可選
• 自定義指令增加 beforeUnmount

1.5 一些變化

• 渲染函數變化
• 異步組件需要用 createAsyncComponent
• 統一普通插槽與作用域插槽
• 指令中支持動態參數

1.6 一些移除

• inline-template
• filters
• 事件綁定中的 keyCode
• 不再支持函數式組件，請轉用純渲染函數
• 移除 v-bind 中的 .sync 修飾符

應對之道

• 閱讀理解 RFC：https://github.com/vuejs/rfcs
• 閱讀源碼：https://github.com/vuejs/vue-next
• 學習 TypeScript
• 使用單元測試/E2E測試武裝自己
• 將插槽升級到 v-slot
• 學習 Composition API
• 提前體驗最新版
• 建立自己的知識體系
• 理解作者的設計思路
• 多看多聽多寫

注

1. Vue.js紀錄片《Vue.js: The Documentary》
2. 官方工具鏈
3. 優秀的組件庫
   
   
4. 上層框架
   
5. 移動端方案（H5/Hybrid）