資料雙向繫結與虛擬dom原理

2021-09-26 20:12:22 字數 348 閱讀 5153

一,資料雙向繫結

view的變化反映到viewmodel,viewmodel變化同步反映到view上

原理:vue資料雙向繫結是通過資料劫持,結合發布者-訂閱者模式方式實現的

二,虛擬dom原理

虛擬dom是為了解決dom操作過多而導致效能低的問題,直接操作dom,改一次渲染一次,而虛擬dom是用js模擬一棵dom樹,每次修改dom,先把虛擬dom修改,最後再一次性把虛擬dom更新,提高效能

虛擬dom演算法

1,用於物件結構表與dom樹結構,然後執行這個樹構建乙個真正的dom樹

2,狀態變換後重構一棵樹,新樹與舊樹比較記錄二者的關係

3,把二者差異運用到檢視層更新

資料雙向繫結原理

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

雙向資料繫結原理

資料劫持 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...