vue中實現雙向數據綁定原理,使用了Object.defineproperty()方法,方法簡單

在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
    })

效果圖如下: