全面改革：解讀vue3.0的變化

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

vue3.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的開發者。

3. 對象式的組件聲明方式

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開發路線