全面改革:解讀 Vue 3.0 的變化

9月30日,尤雨溪在medium個人博客上發佈了vue3.0的開發思路,國內有翻譯的版本,見文章最後的參考鏈接。3.0帶了了很大的變化,他講了一些改進的思路以及整個開發流程的規劃。

vue3.0的改進思路

vue最主要的特點就是響應式機制、模板、以及對象式的組件聲明語法,而3.0對這三部分都做了更改。

全面改革:解讀 Vue 3.0 的變化


1. 響應式

2.x的響應式是基於Object.defineProperty實現的代理,兼容主流瀏覽器和ie9以上的ie瀏覽器,能夠監聽數據對象的變化,但是監聽不到對象屬性的增刪數組元素和長度的變化,同時會在vue初始化的時候把所有的Observer都建立好,才能觀察到數據對象屬性的變化。

針對上面的問題,3.0進行了革命性的變更,採用了ES2015的Proxy來代替Object.defineProperty,可以做到監聽對象屬性的增刪和數組元素和長度的修改,還可以監聽Map、Set、WeakSet、WeakMap,同時還實現了惰性的監聽,不會在初始化的時候創建所有的Observer,而是會在用到的時候才去監聽。但是,雖然主流的瀏覽器都支持Proxy,ie系列卻還是不兼容,所以針對ie11,vue3.0決定做單獨的適配,暴露出來的api一樣,但是底層實現還是Object.defineProperty,這樣導致了ie11還是有2.x的問題。但是絕大部分情況下,3.0帶來的好處已經能夠體驗到了。

響應式方面,vue3.0做了實現機制的變更,採用ES2015的Proxy,不但解決了vue2.x中的問題,還是得性能有了進一步提升。雖然有一些兼容問題,但是通過適配的方式解決掉了。此外,還暴露了observable的api來創建響應式對象,可以替代掉event bus,來做一些跨組件的通信。

2.模板

模板方面沒有大的變更,只改了作用域插槽,2.x的機制導致作用域插槽變了,父組件會重新渲染,而3.0把作用於插槽改成了函數的方式,這樣只會影響子組件的重新渲染,提升了渲染的性能。

同時,對於render函數的方面,vue3.0也會進行一系列更改來方便習慣直接使用api來生成vdom的開發者。

vue2.x中的組件是通過聲明的方式傳入一系列option,和TypeScript的結合需要通過一些裝飾器的方式來做,雖然能實現功能,但是比較麻煩。

3.0修改了組件的聲明方式,改成了類式的寫法,這樣使得和TypeScript的結合變得很容易。

此外,vue的源碼也改用了TypeScript來寫。其實當代碼的功能複雜之後,必須有一個靜態類型系統來做一些輔助管理,如React使用的Flow,Angular使用的TypeScript。現在vue3.0也全面改用TypeScript來重寫了,更是使得對外暴露的api更容易結合TypeScript。靜態類型系統對於複雜代碼的維護確實很有必要。

其他的一些東西

vue3.0的改變是全面的,上面只涉及到主要的3個方面,還有一些其他的更改:

  • 支持自定義渲染器,從而使得weex可以通過自定義渲染器的方式來擴展,而不是直接fork源碼來改的方式。
  • 支持Fragment(多個根節點)和Protal(在dom其他部分渲染組建內容)組件,針對一些特殊的場景做了處理。
  • 基於treeshaking優化,提供了更多的內置功能。

vue3.0的開發流程規劃

vue的開發思路是公開的,尤雨溪說主要的特性會聽取一些主要庫的開發者的反饋,有比較確定的方案以後公佈RFC收集公眾的反饋意見,之後才進入開發,同時會同步生態內相關的庫和工具的更新。

雖然vue不如react和angular那樣有大公司維護,但是藉助開源的力量,整個流程都是開源社區參與的,這樣vue的穩定程度和開發思路自然也就不會有什麼大的問題。

總結

vue3.0對vue的主要3個特點:響應式、模板、對象式的組件聲明方式,進行了全面的更改,底層的實現和上層的api都有了明顯的變化,基於Proxy重新實現了響應式,基於treeshaking內置了更多功能,提供了類式的組件聲明方式。而且源碼全部用typescript重寫。以及進行了一系列的性能優化。

尤雨溪說,大概19年左右就可以見到vue3.0,非常期待這個全面改革的版本 。

全面改革:解讀 Vue 3.0 的變化


https://juejin.im/post/5bb6185ff265da0abd352f4e


分享到:


相關文章: