vue3新特性:
- 更快
- 更小
- 更易於維護
- 更多原生支持
- 更易於開發使用
- 重寫虛擬DOM
- 優化插槽生成
- 靜態樹提升
- 基於Proxy的觀察者機制
- 使vue更小
1) 以es5爲基礎,更小更快。(快:Proxy重構虛擬dom功能,小:支持tree-shaking,運行時的最小體積將低於10kb)
2) 支持TS 3.0源碼使用TS編寫(Typescript)
3)優化插槽生成:
在當前的vue版本中,當父組件重新渲染時,其子組件也必須重新渲染(除非修改的數據是子組件的props,纔會觸發組件的重新渲染)。使用vue3,可以單獨重新渲染父組件和子組件。
4) 靜態樹提升:
使用靜態樹提升,這意味着vue3的編譯器能夠檢測到什麼是靜態組件,然後將其提升,從而降低了渲染成本。
5 )更多原生的支持,運行時內核將與平臺無關,使得vue可以更容易的與任何平臺(ios、android、web)一起使用
6) 更易於開發使用,Observer模塊已被解壓縮到自己的包中,允許使用它。
7) 3.0 Function-based API 代替傳統的Class API ,摒棄高階組件。
優勢:複用簡單,把要複用的邏輯抽取到函數中(如mixin)
vue3中重點
1:監測機制
Vue3.0已經放棄了Object.defineProperty ,因爲這個實現存在很多限制:
(無法監聽屬性的添加和刪除、數組索引和長度的變更)
而選擇了使用更快的原生Proxy:
看一下Proxy對比Object.defineProperty的優勢在哪?
它的共同點:這兩種都是基於數據劫持實現的雙向綁定。
什麼是數據劫持?
當訪問或者設置對象屬性的時候,觸發相應的函數,並且返回或者設置的值。劫持對象屬性的getter和setter操作,當數據發生變化時發出通知。
數據劫持的優勢:
1.不需要進行顯示調用,vue的雙向綁定原理即使通過數據劫持+發佈訂閱 來實現的,例如react的setState
2.通過屬性的劫持可以精準獲得變化的內容,不需要額外的diff操作,減少性能消耗
Object.defineProperty的缺陷:
1)性能:通過遍歷對象的屬性進行監聽,但是屬性值也是對象就需要深度遍歷。
2)無法監聽數組:數組的主要操作場景是遍歷,如果每一個元素都掛載set和get方法,會產生巨大性能消耗
3)對屬性的添加、刪除動作的檢測;
4)對數組基於下標的修改、對於 .length修改的檢測
重點來了!!!
Proxy的優勢:
Proxy可以理解成,在對象之前架設一層“攔截”,外界對該對象的訪問,都必須先通過這層攔截,因此提供了一種機制,可以對外界的訪問進行過濾和改寫,
可以認爲Proxy是Object.defineProperty的全方位加強版!!
1.Proxy可以直接監聽對象而非屬性,並返回一個新對象。
2.Proxy可以直接監聽數組的變化
API: Proxy有多達13種攔截方法,不限於apply、ownKeys、has、deleteProperty等等是Object.defineProperty不具備的。使速度加倍,節省內存開銷
常用的api:
–handler.get(target,property,receiver)
用於攔截對象的讀取操作,target指目標對象,property指被獲取的屬性名,receiver是Proxy或者繼承Proxy的對象,一般就是Proxy實例。
–handler.set(target,property,value,receiver)
多了個value
–handler.apply(target,thisArg,argumentsList)
用於攔截函數的調用,thisArg指被調用時的上下文對象,argumentsList指調用時的參數數組,此時target必須是一個函數對象,否則會報錯
等等。。。
Proxy語法:
1.Proxy是ES6原生提供的
let proxy = new Proxy(target,handler)
參數target使用Proxy包裝的目標對象(可以是任何類型的對象,數 組,函數,等)
參數handler也是一個對象,其屬性是當執行一個操作時定義代理的行 爲函數,也就是自定義的行爲。(handler可爲空對象且不能爲Null)
新的observer 提供了:
1.公開的用於創建observeable的API
2.默認爲惰性監測,在2.x版本中,任何響應式的數據,不管它的大小都會在啓動的時候監測功能,如果數據量很大的話,在啓動應用的時候可能會造成嚴重的性能消耗。而在3.x中,只有應用的初始可見部分所用到的數據會被檢測,大大提升了性能
3.不可變監測對象
4.更好的應用能力,新增的renderTracked和renderTriggered鉤子函數,可以精確地追蹤到一個組件發生重重渲染的觸發時機和完成時機及其原因。
5.更精準的變更通知,在2.x中,你在使用Vue.set來給對象新增一個屬性時,這個對象的所有watch都會重新運行;在3.x中,只有依賴的那個屬性的watch纔會重新執行