最全的Vue3.0新特性預覽(翻譯)

Harry楊醬發表於2018-11-21

前言

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 版本的構建

基於Proxy的觀察者機制,全語言覆蓋+更好的效能

更小

  • 更友好的tree-shaking
  • 新的core runtime 壓縮後大概 10kb

更加可維護

  • Flow -> TypeScript
  • 包的解耦
  • 編譯器重寫
    • 可插拔的架構
    • 提供更強大的IDE支援來作為基礎設施

提供更方便的原生支援

執行時核心也將與平臺無關,使得 Vue 可以更容易地與任何平臺(例如Web,iOS或Android)一起使用

更方便的開發

  • 暴露響應式的api

暴露響應式的api

  • 輕鬆識別元件重新渲染的原因

    輕鬆識別元件重新渲染的原因

  • 提供對TypeScript的支援(TSX)

    提供對TypeScript的支援(TSX)

  • 更友好的warning traces

    • 現在包括功能元件
    • 可檢查的props
    • 在更多的警告中提供可用的traces

實驗性的 Hooks API

類似react hook的API,詳情可以見

實驗性的 Time Slicing 支援

當許多元件同時嘗試重新渲染時,瀏覽器都會變得很慢,利用Time Slicing將JS執行分為幾部分,此時,使用者的互動不會被阻塞

參考

www.css88.com/archives/10…

最後

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

前端每日精讀

相關文章