vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单

Posted 2021-01-25 pinkyun

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

效果图如下: