vue3.0的變化


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優化,提供了更多的內置功能

 






































免責聲明!

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



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