双向数据绑定原理及实现

Vue双向数据绑定的实现原理就是利用了 Object.defineProperty()这个方法重新定义了对象获取属性值（get）和设置属性值（set）的操作来实现的

代码实现：

var obj={};Object.defineProperty(obj, 'val',{ set:function (newVal) { 
document.getElementById("a").value =newVal==undefined?'':newVal; 
document.getElementById("b").innerHTML=newVal==undefined?'':newVal; 
}
});
document.getElementById("a").addEventListener("keyup",function (e) {
 obj.val = e.target.value;
})

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。

语法

Object.defineProperty(obj, prop, descriptor)

参数

obj：

要在其上定义属性的对象

prop：

要定义或修改的属性的名称。

descriptor：

将被定义或修改的属性描述符。

Object.defineProperty()