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

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

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

解釋：

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

看下方代碼：

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

總結(jié)

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

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