首先先說個面試題哈，就是vue中的v-model是如何實(shí)現(xiàn)雙向數(shù)據(jù)綁定的
咳咳，下面開始背誦經(jīng)典面試題了
首先當(dāng)我new一個vue實(shí)例的時(shí)候，里面在data里聲明的數(shù)據(jù)，都會以getter和setter的形式保存，觸發(fā)了一個方法，就是Object.defineProperty。這個方法里面有set和get兩個方法。保存數(shù)據(jù)。當(dāng)數(shù)據(jù)發(fā)生了變化，setter會通知到watch，從而數(shù)據(jù)驅(qū)動了視圖的變化~（當(dāng)然這個不是絕對正確的，僅是自己總結(jié)）

那么這個Object.defineProperty這個方法是干啥的呢。

它會直接在一個對象上定義一個新屬性，或者修改一個對象的現(xiàn)有屬性， 并返回這個對象。

該方法允許精確添加或修改對象的屬性。通過賦值操作添加的普通屬性是可枚舉的，能夠在屬性枚舉期間呈現(xiàn)出來（for…in 或 Object.keys 方法）， 這些屬性的值可以被改變，也可以被刪除。這個方法允許修改默認(rèn)的額外選項(xiàng)（或配置）。默認(rèn)情況下，使用 Object.defineProperty() 添加的屬性值是不可修改的。

 var obj = {};
    Object.defineProperty(obj, 'test', {
        get: ()=>{console.log('get被調(diào)用了')},
        set: ()=>{console.log('set被調(diào)用了')}
    })

image

在瀏覽器控制器中當(dāng)我給對象賦值的時(shí)候，調(diào)用了set函數(shù)，當(dāng)我讀取對象的值的時(shí)候，調(diào)用了get函數(shù)。

看到這里對vue的雙向數(shù)據(jù)綁定或者是MVVM這種設(shè)計(jì)模式亦或是vue最大的優(yōu)點(diǎn)等一系列面試題有了更深的理解。

然后說回用原生JS實(shí)現(xiàn)數(shù)據(jù)雙向綁定
代碼如下

<input type="text" id="input_1">
<span id="span_1"></span>


<script>
    var obj = {};
    Object.defineProperty(obj, 'test', {
        set: (newVal)=>{
            document.getElementById('input_1').value = newVal;
            document.getElementById('span_1').innerHTML = newVal;
        }
    });
    document.addEventListener('keyup', (e)=>{
        obj.test = e.target.value;      //事件監(jiān)聽
    })

</script>

在此時(shí)我在頁面上就可以實(shí)現(xiàn)我輸入到input框的內(nèi)容同步到span標(biāo)簽上，并且在控制臺給obj.test賦值也會同步到input和span標(biāo)簽。