- 本文只是針對視頻內容的重點整理,如若不清楚的地方請看文末鏈接的現場視頻內容。
性能方面的優化
- 路由懶加載
- 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 語法糖 (