Vue.js 3.0 新特性預覽


總結起來,Vue 3 以下方面值得我們期待 :

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

完整的PPT:docs.google.com/presentatio…

Evan 和 Vue 團隊的目標是盡可能順利地過渡到 Vue 3 ,在這個過程中,這些變化在無形地改善了框架。

讓 Vue 更快

雖然 Vue 已經非常快了,但 Evan 認為 Vue 3 會更快。如何做到呢…

重寫虛擬DOM (Virtual DOM Rewrite)

隨着虛擬 DOM 重寫,我們可以期待更多的 編譯時(compile-time)提示來減少 運行時(runtime)開銷。重寫將包括更有效的代碼來創建虛擬節點。

Vue.js 3 重寫虛擬DOM

優化插槽生成(Optimized Slots Generation)

在當前的 Vue 版本中,當父組件重新渲染時,其子組件也必須重新渲染。 使用 Vue 3 ,可以單獨重新渲染父組件和子組件。

優化插槽生成

靜態樹提升(Static Tree Hoisting)

使用靜態樹提升,這意味着 Vue 3 的編譯器將能夠檢測到什么是靜態組件,然后將其提升,從而降低了渲染成本。它將能夠跳過未整個樹結構打補丁的過程。

靜態樹提升(Static Tree Hoisting)

靜態屬性提升(Static Props Hoisting)

此外,我們可以期待靜態屬性提升,其中 Vue 3 將跳過不會改變節點的打補丁過程。

基於 Proxy 的觀察者機制

目前,Vue 的反應系統是使用 ObectDefineProperty 的 getter 和 setter。 但是,Vue 3 將使用 ES2015 Proxy 作為其觀察者機制。 這消除了以前存在的警告,使速度加倍,並節省了一半的內存開銷。

為了繼續支持 IE11,Vue 3 將發布一個支持舊觀察者機制和新 Proxy 版本的構建。

使 Vue 更小

Vue已經非常小了,在運行時(runtime)壓縮后大約 20kb 。 但我們可以期待它會變得更加小,新的核心運行時壓縮后大概 10kb 。 這將在很大程度上通過消除不使用的庫(也稱為Tree Shaking)來實現。 例如,如果您沒有使用 過渡(transition)元素,則不會包含它。

使其更具可維護性

雖然大多數 Vue 開發人員都沒有在庫本身上工作,但很高興知道 Vue 3 將帶來更多可維護的源代碼。 它不僅會使用 TypeScript ,而且許多軟件包將被解耦,使所有內容更加模塊化。

更多的原生支持

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

更易於開發使用

Observer 模塊已被解壓縮到自己的包中,允許您以新的方式使用它:

跟蹤重新渲染的位置也會更容易。 在 Evan 的演講中,他做了一些實時編碼,並展示了如何跟蹤 Vue 應用程序(使用下面的代碼)來找出觸發組件重新渲染的內容。 這在更大的應用程序和性能微調中非常有用。

Vue 3.0 還會改進對 TypeScript 的支持,允許在編輯器中進行高級的類型檢查和有用的錯誤和警告。

實驗性的 Hooks API

當我們需要在 Vue 中共享兩個組件之間的行為時,我們通常使用 Mixins 。然而,Evan 正在嘗試使用 Hooks API 來避免來自 Mixins 的一些問題,並且更適合使用慣用的 Vue 代碼。

實驗性的 Time Slicing 支持

當您有許多組件同時嘗試重新渲染時,任何瀏覽器都可以開始變得很慢,從而使用戶體驗下降。

Evan展示了他如何嘗試使用 Time Slicing,將 JS 的執行分解為幾個部分,如果有用戶交互需要處理,這些部分將提供給瀏覽器。

小結

我已經喜歡用Vue進行編碼了,我很高興能看到 Vue 更具競爭力,模塊化,更容易調試和更多的開發樂趣。 另外上面說的這些內容除了“明年晚些時候”之外,還沒有一個明確的發布日期。

本文參考:https://juejin.im/entry/5bf1f4d2e51d451dca476889?utm_source=gold_browser_extension


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM