前言
Evan You(尤雨溪)在2018年11月16日早上在 Vue Toronto 的主題演講中預演了 Vue 3.0的新特性 。利用現代瀏覽器支援的新功能,Vue 3 將成為我們已經瞭解和喜愛的 Vue.js 強大的的改進版本。
大概可以分為:
- 更快
- 更小
- 更易於維護
- 更多的原生支援
- 更易於開發使用
完整的PPT請點選:跳轉
翻譯
更快
1、虛擬 DOM 重寫,mounting和patching的速度提高100%
2、更多的編譯時的提示來減少執行時的開銷
3、元件快速路徑+單個呼叫+子型別檢測
- 跳過不必要的條件分支
- JS引擎更容易優化
- 確保例項正確的跟蹤依賴關係
- 避免不必要的父子元件重新渲染
5、靜態樹提升
- 跳過修補整棵樹,從而降低渲染成本
- 即使多次出現也能正常工作
6、靜態屬性提升
- 跳過不會改變節點的修補過程,但是它的子元件會保持修補過程
7、內聯的事件提升
- 避免因為不同的行內函數標識而導致的不必要的重新渲染
8、基於Proxy的觀察者機制,全語言覆蓋+更好的效能
- 目前vue使用的是Object.defineProperty 的 getter 和 setter
- 元件例項初始化的速度提高100%
- 使用Proxy節省以前一半的記憶體開銷,加快速度,但是存在低瀏覽器版本的不相容
- 為了繼續支援 IE11,Vue 3 將釋出一個支援舊觀察者機制和新 Proxy 版本的構建
更小
- 更友好的tree-shaking
- 新的core runtime 壓縮後大概 10kb
更加可維護
- Flow -> TypeScript
- 包的解耦
- 編譯器重寫
- 可插拔的架構
- 提供更強大的IDE支援來作為基礎設施
提供更方便的原生支援
執行時核心也將與平臺無關,使得 Vue 可以更容易地與任何平臺(例如Web,iOS或Android)一起使用
更方便的開發
- 暴露響應式的api
-
輕鬆識別元件重新渲染的原因
-
提供對TypeScript的支援(TSX)
-
更友好的warning traces
- 現在包括功能元件
- 可檢查的props
- 在更多的警告中提供可用的traces
實驗性的 Hooks API
類似react hook的API,詳情可以見
實驗性的 Time Slicing 支援
當許多元件同時嘗試重新渲染時,瀏覽器都會變得很慢,利用Time Slicing將JS執行分為幾部分,此時,使用者的互動不會被阻塞
參考
最後
推薦一下自己的個人公眾號:前端精讀(每日定時推送一篇前端好文)