javascript - Vue 的依賴追蹤屬于單向數(shù)據(jù)綁定還是雙向綁定?
問題描述
官網(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:Vue 的依賴追蹤是【原理上不支持雙向綁定,v-model 只是通過監(jiān)聽 DOM 事件實現(xiàn)的語法糖】
vue的依賴追蹤是通過 Object.defineProperty 把data對象的屬性全部轉(zhuǎn)為 getter/setter來實現(xiàn)的;當(dāng)改變數(shù)據(jù)的某個屬性值時,會觸發(fā)set函數(shù),獲取該屬性值的時候會觸發(fā)get函數(shù),通過這個特性來實現(xiàn)改變數(shù)據(jù)時改變視圖;也就是說只有當(dāng)數(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ù)和視圖綁定起來,和父子組件之間的通信并無什么關(guān)聯(lián);組件之間的通信采用單向數(shù)據(jù)流是為了組件間更好的解耦,在開發(fā)中可能有多個子組件依賴于父組件的某個數(shù)據(jù),假如子組件可以修改父組件數(shù)據(jù)的話,一個子組件變化會引發(fā)所有依賴這個數(shù)據(jù)的子組件發(fā)生變化,所以vue不推薦子組件修改父組件的數(shù)據(jù),直接修改props會拋出警告
相關(guān)文章:
1. html - 移動端radio無法選中2. javascript - webpack打包后的bundlejs文件代碼不知道什么意思.3. javascript - 使用echarts做一個橫向的柱狀圖,但是數(shù)據(jù)超出坐標(biāo)軸范圍了怎么辦?4. 正則表達(dá)式 - python pandas的sep參數(shù)問題5. javascript - Element UI表格錯行6. mysql - 這條聯(lián)合sql語句哪里錯了7. javascript - es6模塊加載export的輸出值有點沒太搞明白8. javascript - 在靜態(tài)頁面上用load 引入的頁面文件問題?9. javascript - vue-resource如何終止之前的ajax請求?10. css - 移動端 line-height安卓錯位,蘋果機正常用,縮放解決了,可是又出來了占位的問題
