在vue中雙向資料繫結原理,我們一般都是用v-model來實現的 ,但一般在面試話會問到其實現的原理,

方法比較簡單,就是利用了es5中的一個方法.Object.defineproperty(),它有三個引數,

Object.defineproperty(obj,'val',attrObject), 引數1: obj是屬性所在的物件,引數2: 'val',屬性名,它是一個string型別,引數3: {}屬性所描述的物件

詳情可以看Object.defineproperty的文件

下面直接上demo,

html程式碼: 

<input type="text" id
 
="inp1">  <br>
    你說啥: <span id="inp2"></span>

js程式碼 

var inp1 = document.getElementById('inp1')
    var inp2 = document.getElementById('inp2')
    var obj ={}
    Object.defineProperty(obj,'val',{  // 傳入obj物件的一個屬性  屬性名是自定義的
        set: function(newval){  // 通過set方法可以拿到新的值  
 

            // console.log(newval)
            inp1.value= newval
            inp2.innerHTML= newval
        }
    })
    // 給輸入框一個監聽事件  監聽變化時重新賦值
    inp1.addEventListener('keyup',function(e){
        // console.log(e.target.value)
        obj.val = e.target.value
    })

效果圖如下: