Vue.js 3.0發佈更新計劃

在11月14日-16日於多倫多舉辦的 VueConf TO 2018 大會上，尤雨溪發表了名爲 「 Vue 3.0 Updates 」 的主題演講，對 Vue 3.0 的更新計劃、方向進行了詳細闡述。目前該演講的 PPT 也已上傳至 Google 文檔，感興趣的可點此查閱。本次版本主要圍繞如下幾個版原本升級：

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

完整的ppt地址：https://link.juejin.im/?targe...

更快

• Virtual DOM 徹底重寫，mounting & patching 提速 100% ；
• 更多編譯時（compile-time）提醒以減小 runtime 開銷；
• 基於 Proxy 觀察者機制以知足全語言覆蓋及更好的性能；
• 放棄 Object.defineProperty ，使用更快的原生 Proxy ；
• 組件實例初始化速度提升 100％ ；
• 提速一倍/內存使用下降一半。

爲了讓Vue 3.0更快，Vue開發小組作了以下的一些改進：

重寫虛擬DOM (Virtual DOM Rewrite)

隨着虛擬 DOM 重寫，咱們能夠期待更多的 編譯時（compile-time）提示來減小 運行時（runtime）開銷。

優化插槽生成(Optimized Slots Generation)

在當前的 Vue 版本中，當父組件從新渲染時，其子組件也必須從新渲染。 使用 Vue 3 ，能夠單獨從新渲染父組件和子組件。

靜態樹提高(Static Tree Hoisting)

使用靜態樹提高，這意味着 Vue 3 的編譯器將可以檢測到什麼是靜態組件，而後將其提高，從而下降了渲染成本。

靜態屬性提高（Static Props Hoisting）

此外，靜態屬性的提高， Vue 3 將跳過不會改變節點的打補丁過程。

基於 Proxy 的觀察者機制

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

更小

• Tree-shaking 更友好；
• 新的 core runtime: ~10kb gzipped

Vue已經很是小了，在運行時（runtime）壓縮後大約 20kb 。 但咱們能夠期待它會變得更加小，新的核心運行時壓縮後大概 10kb 。 這將在很大程度上經過消除不使用的庫(也稱爲Tree Shaking)來實現。

更易維護

• Flow -> TypeScript
• Decoupled Packages（解耦包）
• 編譯器重寫

雖然大多數 Vue 開發人員都沒有在庫自己上工做，但很高興知道 Vue 3 將帶來更多可維護的源代碼。 它不只會使用 TypeScript ，並且許多軟件包將被解耦，使全部內容更加模塊化。

更多的原生支持

運行時內核也將與平臺無關，使得 Vue 能夠更容易地與任何平臺（例如Web，iOS或Android）一塊兒使用，從而更好的支持跨平臺開發。

讓開發者使用更輕鬆

• Exposed reactivity API
• 輕鬆識別組件從新渲染的緣由
• 改進 TypeScript 以支持 w/TSX
• 改進警告追蹤
• Experimental Hooks API
• Experimental Time Slicing Support
• 支持 IE11

Exposed reactivity API

Observer 模塊已被解壓縮到本身的包中，容許您以新的方式使用它。

輕鬆識別組件從新渲染的緣由

跟蹤從新渲染的位置也會更容易。 在 Evan 的演講中，他作了一些實時編碼，並展現瞭如何跟蹤 Vue 應用程序（使用下面的代碼）來找出觸發組件從新渲染的內容。 這在更大的應用程序和性能微調中很是有用。

改進 TypeScript 以支持 w/TSX

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

實驗性的 Hooks API

當咱們須要在 Vue 中共享兩個組件之間的行爲時，咱們一般使用 Mixins 。然而，Evan 正在嘗試使用 Hooks API 來避免來自 Mixins 的一些問題，而且更適合使用慣用的 Vue 代碼。

實驗性的 Time Slicing 支持

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

Evan展現了他如未嘗試使用 Time Slicing，將 JS 的執行分解爲幾個部分，若是有用戶交互須要處理，這些部分將提供給瀏覽器。

不得不說，Vue.js 3.0版本將發生質的變化，繼續朝着更快、更小、 更易於管理和更利於開發者的目標前進，而且部分借鑑了React的相關思想，正所謂「變便是不變」。

參考：英文原文

Vue.js 3.0 PPT