首頁猿問 Vue...

Vue 的依賴追蹤屬于單向數(shù)據(jù)綁定還是雙向綁定？

JavaScript

qq_遁去的一_1 2018-11-21 18:14:17

官網(wǎng)文檔中提到過，Vue 的 v-model 指令實現(xiàn)了數(shù)據(jù)的雙向綁定。https://vuejs.org/v2/guide/fo...但是實際開發(fā)中，組件的數(shù)據(jù)流是單向的，子組件修改父組件 props 是不被推薦的做法。所以問題是，Vue 的依賴追蹤是【在原理上支持雙向綁定，但只是為了開發(fā)上的便利而建議采用單向數(shù)據(jù)流】，還是【原理上不支持雙向綁定，v-model 只是通過監(jiān)聽 DOM 事件實現(xiàn)的語法糖】呢？

查看完整描述

1 回答

幕布斯6054654

TA貢獻1876條經(jīng)驗獲得超7個贊

Vue 的依賴追蹤是【原理上不支持雙向綁定，v-model 只是通過監(jiān)聽 DOM 事件實現(xiàn)的語法糖】

vue的依賴追蹤是通過 Object.defineProperty 把data對象的屬性全部轉(zhuǎn)為 getter/setter來實現(xiàn)的；當改變數(shù)據(jù)的某個屬性值時，會觸發(fā)set函數(shù),獲取該屬性值的時候會觸發(fā)get函數(shù)，通過這個特性來實現(xiàn)改變數(shù)據(jù)時改變視圖；也就是說只有當數(shù)據(jù)改變時才會觸發(fā)視圖的改變，反過來在操作視圖時，只能通過DOM事件來改變數(shù)據(jù)，再由此來改變視圖，以此來實現(xiàn)雙向綁定

大致過程如下

//data

var obj = {

'message':'hello'

}

//vm

var val = obj.message

Object.defineProperty(obj,'message',{

get(){

return val

},

set(value){

val = value

updataView()

}

})

function updataView(){

box.innerHTML = obj.message //觸發(fā)get

}

// init

updataView()

textIpt.oninput = function(){

obj.message = this.value //觸發(fā)set

}

雙向綁定是在同一個組件內(nèi)，將數(shù)據(jù)和視圖綁定起來，和父子組件之間的通信并無什么關聯(lián)；
組件之間的通信采用單向數(shù)據(jù)流是為了組件間更好的解耦，在開發(fā)中可能有多個子組件依賴于父組件的某個數(shù)據(jù)，假如子組件可以修改父組件數(shù)據(jù)的話，一個子組件變化會引發(fā)所有依賴這個數(shù)據(jù)的子組件發(fā)生變化，所以vue不推薦子組件修改父組件的數(shù)據(jù)，直接修改props會拋出警告

反對回復 2018-12-15