1.
vue最主要的特點就是響應式機制、模板、以及對象式的組件聲明語法,而3.0對這三部分都做了更改。
1. 響應式(數據的雙向綁定)
2.0的響應式
基於Object.defineProperty中的set和get方法實現
兼容主流瀏覽器和ie9以上的ie瀏覽器,
能夠監聽數據對象的變化,
但是監聽不到對象屬性的增刪、數組元素和長度的變化,
同時會在vue初始化的時候把所有的Observer都建立好,才能觀察到數據對象屬性的變化。
3.0的響應式
采用了
ES2015的Proxy來代替Object.defineProperty,
可以
做到監聽對象屬性的增刪和數組元素和長度的修改,
還可以監聽Map、Set、WeakSet、WeakMap,
同時還實現了惰性的監聽,
不會在初始化的時候創建所有的Observer,而是會在用到的時候才去監聽。
但是,
雖然主流的瀏覽器都支持Proxy,ie系列卻還是不兼容,
所以針對ie11,vue3.0決定做單獨的適配,暴露出來的api一樣,但是底層實現還是Object.defineProperty
2.模板
模板方面沒有大的變更,只改了作用域插槽,
2.x的機制導致作用域插槽變了,父組件會重新渲染,
3.0把作用域插槽改成了函數的方式,這樣只會影響子組件的重新渲染,提升了渲染的性能。 同時,對於render函數的方面,vue3.0也會進行一系列更改來方便習慣直接使用api來生成vdom的開發者。
3. 對象式的組件聲明方式
vue2.x中的組件是通過聲明的方式傳入一系列option,和TypeScript的結合需要通過一些裝飾器的方式來做,雖然能實現功能,但是比較麻煩。 3.0修改了組件的聲明方式,改成了類式的寫法,這樣使得和TypeScript的結合變得很容易。 此外,vue3.0的源碼也改用了TypeScript來寫。
其實當代碼的功能復雜之后,必須有一個靜態類型系統來做一些輔助管理,如React使用的Flow,Angular使用的TypeScript。
現在vue3.0也全面改用TypeScript來重寫了,更是使得對外暴露的api更容易結合TypeScript。靜態類型系統對於復雜代碼的維護確實很有必要。
其他的一些東西
vue3.0的改變是全面的,上面只涉及到主要的3個方面,還有一些其他的更改:
支持自定義渲染器,從而使得weex可以通過自定義渲染器的方式來擴展,而不是直接fork源碼來改的方式。
支持Fragment(多個根節點)和Protal(在dom其他部分渲染組建內容)組件,針對一些特殊的場景做了處理。
基於treeshaking優化,提供了更多的內置功能