Vue 雙向資料繫結原理分析

當我們在前端開發中採用mv*的模式時，m - model，指的是模型，也就是資料，v - view，指的是檢視，也就是頁面展現的部分。通常，我們需要編寫**，將從伺服器獲取的資料進行「渲染」，展現到檢視上。每當資料有變更時，我們會再次進行渲染，從而更新檢視，使得檢視與資料保持一致。也就是：

paste_image.png

而另一方面，頁面也會通過使用者的互動，產生狀態、資料的變化，這個時候，我們則編寫**，將檢視對資料的更新同步到資料，以致於同步到後台伺服器。也就是：

paste_image.png

不同的前端 mv* 框架對於這種 model 和 view 間的資料同步有不同的處理。在 backbone 中，model 到 view 的資料傳遞，可以在 view 中監聽 model 的 change 事件，每當 model 更新，view 中重新執行 render。而 view 到 model 的資料傳遞，可以監聽 view 對應的 dom 元素的各種事件，在檢測到 view 狀態變更後，將變更的資料傳送到 model。相較於 backbone，angularjs 所代表的 mvvm 框架則更進一步，從框架層面支援這種資料同步機制，而且是雙向資料繫結：

paste_image.png

不過在不同的 mvvm 框架中，實現雙向資料繫結的技術有所不同。

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

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

參考：資料與檢視的繫結與同步，最終體現在對資料的讀寫處理過程中，也就是 object.defineproperty() 定義的資料 set、get 函式中。vue 中對於的函式為 definereactive，在精簡版實現中，我只保留了一些基本特性：

function

definereactive(obj, key, value)

return value

},set: function

reactivesetter(newval) else }})

}

在對資料進行讀取時，如果當前有 watcher（對資料的觀察者吧，watcher 會負責將獲取的新資料傳送給檢視），那將該 watcher 繫結到當前的資料上（dep.depend()，dep 關聯當前資料和所有的 watcher 的依賴關係），是乙個檢查並記錄依賴的過程。而在對資料進行賦值時，如果資料發生改變，則通知所有的 watcher（借助 dep.notify()）。這樣，即便是我們手動改變了資料，框架也能夠自動將資料同步到檢視。

Vue 雙向資料繫結原理分析

Vue雙向資料繫結原理分析

Vue 雙向資料繫結原理分析

vue雙向繫結原理分析

Vue 雙向資料繫結原理分析

Vue雙向資料繫結原理分析

Vue 雙向資料繫結原理分析

vue雙向繫結原理分析

相關推薦