快捷導(dǎo)航

淺談vue實現(xiàn)雙向事件綁定v-model的原理

更新時間：2021年08月02日 16:20:08 作者：noBug123

vue使用v-model實現(xiàn)數(shù)據(jù)的雙向綁定，它會根據(jù)控件類型自動選取正確的方法來更新元素，本文就詳細的介紹一下原理，感興趣的可以了解一下

解釋：

初始化vue實例時候，會遞歸遍歷data的每一個屬性，并且通過defineProperty來監(jiān)聽每一個屬性的get，set方法，從而一旦某個屬性重新賦值，則能監(jiān)聽到變化來操作相應(yīng)的頁面控制

看下方代碼：

Object.defineProperty(data,"name",{
        get(){
            return data["name"];
        },
        set(newVal){
            let val=data["name"];
            if (val===newVal){
                return;
            }
            data["name"]=newVal;
            // 監(jiān)聽到了屬性值的變化,假如node是其對應(yīng)的input節(jié)點
            node.value=newVal;
        }    
    })

總結(jié)

一方面modal層通過Object.defineProperty來劫持每個屬性，一旦監(jiān)聽到變化通過相關(guān)的頁面元素更新。另一方面通過編譯模板文件，為控件的v-model綁定input事件，從而頁面輸入能實時更新相關(guān)data屬性值

那么Object.defineProperty是用來控制一個對象屬性的一些特有操作，比如讀寫權(quán)、是否可以枚舉，這里我們主要先來研究下它對應(yīng)的兩個描述屬性get和set，v-model其實是對其get和set進行重寫操作，get就是在讀取name屬性這個值觸發(fā)的函數(shù)，set就是在設(shè)置name屬性這個值觸發(fā)的函數(shù)