javascript - Vue 的依賴追蹤屬於單向資料綁定還是雙向綁定？

Question

官網文件中提到過，Vue 的 v-model 指令實現了資料的雙向綁定。 https://vuejs.org/v2/guide/fo... 但實際開發中，元件的資料流是單向的，子元件修改父元件 props 是不被推薦的做法。所以問題是，Vue 的依賴追...

大家讲道理 · Answer

Vue 的依賴追蹤是【原理上不支援雙向綁定，v-model 只是透過監聽 DOM 事件實現的語法糖】

vue的依賴追蹤是透過Object.defineProperty 把data物件的屬性全部轉為getter/setter來實現的；當改變資料的某個屬性值時，會觸發set函數,取得該屬性值的時候會觸發get函數，透過這個特性來實現改變數據時改變視圖；也就是說只有當數據改變時才會觸發視圖的改變，反過來在操作視圖時，只能透過DOM事件來改變數據，再由此來改變視圖，以此來實現雙向綁定

大致過程如下

    //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 //触发get
    }

    // init
    updataView()

    textIpt.oninput = function(){
        obj.message = this.value //触发set
    }

雙向綁定是在同一個元件內，將資料和視圖綁定起來，和父子元件之間的通訊並無什麼關聯；
元件之間的通訊採用單向資料流是為了元件間更好的解耦，在開發中可能有多個子組件依賴於父組件的某個數據，假如子組件可以修改父組件數據的話，一個子組件變化會引發所有依賴這個數據的子組件發生變化，所以vue不推薦子組件修改父組件的數據，直接修改props會拋出警告

javascript - Vue 的依賴追蹤屬於單向資料綁定還是雙向綁定？

全部回覆(1)我來回復