資料雙向繫結原理

2021-08-31 16:19:45 字數 524 閱讀 5422

angularjs 採用「髒值檢測」的方式

資料發生變更後,對於所有的資料和檢視的繫結關係進行一次檢測,識別是否有資料發生了改變,有變化進行處理,可能進一步引發其他資料的改變,所以這個過程可能會迴圈幾次,一直到不再有資料變化發生後,將變更的資料傳送到檢視,更新頁面展現。

如果是手動viewmodel 的資料進行變更,為確保變更同步到檢視,需要手動觸發一次「髒值檢測」。

vuejs 則使用 es5 提供的 object.defineproperty() 方法,監控對資料的操作,從而可以自動觸發資料同步。

並且,由於是在不同的資料上觸發同步,可以精確的將變更傳送給繫結的檢視,而不是對所有的資料都執行一次檢測。

object.defineproperty方法第乙個引數是要設定的物件,第二個引數是物件的屬性,第三個引數是乙個物件,裡面有set和get方法,當設定屬性值或者獲取屬性值的時候就會執行這個set.get方法。vue就是通過set方法,做到vue資料變更時,同時渲染頁面資料。vue也會給dom物件繫結物件,這樣頁面資料變更時,也會對應的修改data.

雙向資料繫結原理

資料劫持 vuejs 則使用 es5 提供的 object.defineproperty 方法,監控對資料的操作,從而可以自動觸發資料同步。並且,由於是在不同的資料上觸發同步,可以精確的將變更傳送給繫結的檢視,而不是對所有的資料都執行一次檢測。var obj object.definepropert...

vue雙向資料繫結原理

vue應用的是mvvm框架,view和model分離,然後通過vm雙向資料繫結,div 原生物件即資料 var data 建立乙個 viewmodel 例項 var vm new vue 然而乙個動態資料的繫結,是怎麼實現的呢,首先vue利用es5的defineproperty方法裡的get,set...

vue雙向資料繫結原理

text id text show p var text document.getelementbyid text show document.getelementbyid show var model object.defineproperty model,name set function ne...