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

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

數(shù)據(jù)與視圖的綁定與同步，最終體現(xiàn)在對(duì)數(shù)據(jù)的讀寫(xiě)處理過(guò)程中，也就是 Object.defineProperty() 定義的數(shù)據(jù) set、get 函數(shù)中。Vue 中對(duì)于的函數(shù)為 defineReactive，在精簡(jiǎn)版實(shí)現(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()

}

}

})

}

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

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

vue2.x是以object.defineProperty來(lái)實(shí)現(xiàn)的

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

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