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

前言

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

大概能夠分爲：

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

完整的PPT請點擊：跳轉

翻譯

更快

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

二、更多的編譯時的提示來減小運行時的開銷

三、組件快速路徑+單個調用+子類型檢測

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

四、優化插槽的生成

• 確保實例正確的跟蹤依賴關係
• 避免沒必要要的父子組件從新渲染

五、靜態樹提高

• 跳過修補整棵樹，從而下降渲染成本
• 即便屢次出現也能正常工做

六、靜態屬性提高

• 跳過不會改變節點的修補過程，可是它的子組件會保持修補過程

七、內聯的事件提高

• 避免由於不一樣的內聯函數標識而致使的沒必要要的從新渲染

八、基於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…

最後

推薦一下本身的我的公衆號：前端精讀（每日定時推送一篇前端好文）