Vue 響應式原理 原始碼

2021-10-03 04:28:57 字數 645 閱讀 8980

整個函式結束,相當於初始化所有屬性和vue內建事件(如 $emit),並且使所有屬性變為響應式。

初始化所有option api ,對其中的使用者自定義資料data(){}進行 observe():此函式用來新建乙個類observer的例項,類observer的constructor中用walk()函式進行遍歷每個屬性,walk()函式中呼叫definereactive()函式進行object.defineproperty(obj,key,{})雙向資料繫結。

算了算了,直接上圖,做了乙個原始碼內部的流程圖。打字太麻煩了。

個人建議去深入閱讀一下這個部分,這個部分他做了一些優化,感覺很棒。

舉個例子:

如果我渲染一萬條資料,我只是單純的渲染,我不會對他進行操作。那其實沒必要進行響應式,2.0遞迴遍歷會很消耗效能。

我直接用freeze進行凍結。vue底層自動進行了監聽,如果乙個物件是不可以擴充套件的,她就會直接返回,不進行響應式。在observe()階段。

學習 vue 原始碼 響應式原理

由於剛開始學習 vue 原始碼,而且水平有限,有理解或表述的不對的地方,還請不吝指教。vue 主要通過 watcher dep 和 observer 三個類來實現響應式檢視。另外還有乙個 scheduler 來進行排程,本次暫時不做討論。watcher 和 dep 是訂閱者和發布者的關係,每個 wa...

結合原始碼解析 vue響應式原理

vue響應式原理 在之前vue2.0中,vue的響應式原理主要是基於object.defineproperty進行資料劫持然後結合觀察者模式 發布訂閱模式 來實現資料的雙向繫結。function dep dep.prototype.notify function function sub x sub...

Vue響應式原始碼分析

初始化資料initdata時呼叫obsreve函式。observe函式主要做了3件事 如果不是物件則啥都不做退出。物件已經是響應式的了,有 ob 了,直接返回這個依賴收集器。物件還不是響應式的,執行new observer observer中主要做了3件事 新建乙個new dep 依賴收集器,定義到...