最全的Vue3.0新特性預覽（翻譯）

前言

Evan You（尤雨溪）在2018年11月16日早上在 Vue Toronto 的主題演講中預演了 Vue 3.0的新特性 。利用現代瀏覽器支援的新功能，Vue 3 將成為我們已經瞭解和喜愛的 Vue.js 強大的的改進版本。

大概可以分為：

• 更快
• 更小
• 更易於維護
• 更多的原生支援
• 更易於開發使用

完整的PPT請點選：跳轉

翻譯

更快

1、虛擬 DOM 重寫，mounting和patching的速度提高100％

2、更多的編譯時的提示來減少執行時的開銷

3、元件快速路徑+單個呼叫+子型別檢測

• 跳過不必要的條件分支
• JS引擎更容易優化

4、優化插槽的生成

• 確保例項正確的跟蹤依賴關係
• 避免不必要的父子元件重新渲染

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執行分為幾部分,此時，使用者的互動不會被阻塞

參考

www.css88.com/archives/10…

最後

推薦一下自己的個人公眾號：前端精讀（每日定時推送一篇前端好文）