尤雨溪：Vue3.0正式全球釋出會_2020

小磊哥er發表於2020-10-14
Vue
  • 本文只是針對視訊內容的重點整理，如若不清楚的地方請看文末連結的現場視訊內容。

效能方面的優化

  • 路由懶載入
  • keep-alive快取頁面
  • 使用v-show複用DOM
  • v-for 遍歷避免同時使用 v-if
  • 長列表效能優化
  • 事件的銷燬
  • 圖片懶載入
  • 第三方外掛按需引入
  • 無狀態的元件標記為函式式元件
  • 子元件分割
  • 變數本地化
  • SSR

更好的TypeScript整合

  • 改進的TypeScript支援，編輯器能提供強有力的型別檢查和錯誤及警告
  • 更好的除錯支援

用於處理大規模用例的新API

  • reactive
  • ref
  • computed
  • readonly
  • watchEffect
  • watch
  • unref
  • toRef
  • toRefs
  • isRef
  • isProxy
  • isReactive
  • isReadonly
  • customRef
  • markRaw
  • shallowReactive
  • shallowReadonly
  • shallowRef
  • toRaw

分層內部模組

  • 內部結構已被徹底重寫為一組解耦的模組。新的體系結構提供了更好的可維護性，並允許終端使用者通過tree-shaking來減少執行時大小的一半。
  • 編譯器支援用於構建時自定義的AST轉換（例如，構建時i18n）
  • 核心執行時提供API用於建立針對不同渲染目標（例如本機移動裝置，WebGL或終端）的自定義渲染器
  • @vue/reactivity模組匯出的功能可以直接訪問Vue的響應系統，並且可以用作獨立程式包

composition-api設計目的

  • 旨在解決大型應用程式中Vue使用的難點。 Composition API建立在Reactivity API之上，與2.x基於物件的API相比，可實現類似於React Hooks的邏輯組成和重用，更靈活的程式碼組織模式以及更可靠的型別推斷。

效能改進(相對Vue2)

  • 通過tree-sharking(減輕了多達41％的資源大小)
  • 初始渲染（加快了多達55％的速度）
  • 更新速度（加快了133％的速度）
  • 記憶體佔用（最多減少54％）

提供的兩個實驗性功能

  • 單檔案元件 Composition API 語法糖 (

相關資料

相關文章