前端三大框架對比(二)——數據更新

Angular

最早說Angular的緣由是由於它與其餘兩個框架不一樣，用的是髒檢查機制(Dirty Checking)實現雙向數據綁定

1. 在Angular中有一個Zone.js負責監聽須要視圖變化的事件觸發
2. 每個組件都都它本身的檢測器(detector)，用於負責檢查其自身模板上綁定的變量。
3. 將舊值跟新值進行比較，不相等就說明檢測到變化，更新對應視圖

Vue & React 都是採用虛擬DOM來實現視圖更新

虛擬DOM

vue和react的虛擬DOM的Diff算法大體相同：

1. tree diff 只對同一層級節點比較
2. component diff 比較組件類型
3. element diff 同一層級子節點經過id區分

基於以上這三個約束，使得虛擬DOM的Diff算法的複雜度從O(n^3)降到了O(n)。

Vue

1. Vue會遍歷data對象的全部屬性，並使用Object.defineProperty把這些屬性所有轉爲getter/setter
2. 每一個組件實例都有相應的 watcher 實例對象，它會在組件渲染的過程當中把屬性記錄爲依賴
3. 當依賴項的setter被調用時，會通知watcher從新計算，從而導致它關聯的組件得以更新

React

1. 當使用setState/forceUpdate，會調用render方法更新視圖
2. 父組件更新視圖時，會re-render子組件，因此看起來改變子組件的props也會更新視圖

更多文章 yjy5264.github.io