Vue是如何實現(xiàn)雙向數(shù)據(jù)綁定的？數(shù)據(jù)與視圖的綁定與同步，最終體現(xiàn)在對數(shù)據(jù)的讀寫處理過程中，也就是 Object.defineProperty() 定義的數(shù)據(jù) set、get 函數(shù)中。Vue 中對于的函

Vue是如何實現(xiàn)雙向數(shù)據(jù)綁定的？

數(shù)據(jù)與視圖的綁定與同步，最終體現(xiàn)在對數(shù)據(jù)的讀寫處理過程中，也就是 Object.defineProperty() 定義的數(shù)據(jù) set、get 函數(shù)中。Vue 中對于的函數(shù)為 defineReactive，在精簡版實現(xiàn)中，我只保留了一些基本特性：

function defineReactive(obj， key， value) {

var dep = new Dep()

Object.defineProperty(obj， key， {

enumerable: true，

configurable: true，

get: function reactiveGetter() {

if (Dep.target) {

dep.depend()

}

return value

}，

set: function reactiveSetter(newVal) {

if (value === newVal) {

return

} else {

value = newVal

dep.notify()

}

}

})

}

在對數(shù)據(jù)進行讀取時，如果當前有 Watcher（對數(shù)據(jù)的觀察者吧，watcher 會負責將獲取的新數(shù)據(jù)發(fā)送給視圖），那將該 Watcher 綁定到當前的數(shù)據(jù)上（dep.depend()，dep 關(guān)聯(lián)當前數(shù)據(jù)和所有的 watcher 的依賴關(guān)系），是一個檢查并記錄依賴的過程。而在對數(shù)據(jù)進行賦值時，如果數(shù)據(jù)發(fā)生改變，則通知所有的 watcher（借助 dep.notify()）。這樣，即便是我們手動改變了數(shù)據(jù)，框架也能夠自動將數(shù)據(jù)同步到視圖。

VUE數(shù)據(jù)響應(yīng)原理真的是雙向綁定嗎？效果如何？

vue2.x是以object.defineProperty來實現(xiàn)的

問題是不能檢測到數(shù)組對象內(nèi)部的數(shù)據(jù)變化 vue3.x是用的是es6的proxy來實現(xiàn)的 可以檢測到數(shù)組內(nèi)部的變化 具體可以看看我寫的文章

vue2.x和vue3.x雙向數(shù)據(jù)綁定的區(qū)別一文