简单实现vue中数据双向绑定

vue中的数据双向绑定给我们在对数据进行操作的时候提供了非常大的便利，这里浅显的实现下vue中的数据双向绑定

关键词： Object.defineProperty

要实现vue数据双向绑定，首先得了解Object.defineProperty这个方法。

  Object.defineProperty(obj, prop, descriptor)

参数详解：
obj：要在其上定义属性的对象。
prop：要定义或修改的属性的名称。
descriptor：将被定义或修改的属性描述符。

这个方法主要是精确的添加或者修改对象的属性。
一个对象的属性分为以下几种：

vaule: 属性对应的值，
configurable： 属性是否可以被配置
enumerable：属性是否能被枚举
writable: 属性是否能被重写
get：给属性提供getter方法
set：给属性提供setter方法

这里举个例子：

var obj = {
    name: ''
}
var val = 456;
Object.defineProperty(obj,'name',{
    set: function(value) {
          val = value
    },
    get: function() {
          return  val
    }
})

console.log(obj.name)  // 456

从上面我们可以看到Object.defineProperty的大致用法，改变了obj的name属性
通过get提供的getter，获取了val的值，通过set提供的setter方法，设置name的值

具体实现一个输入框的双向数据绑定，input输入框的值发生变化时候，div做相应的显示。

<!--html-->
<input type="text" id="demo">
<div id="show"></div>

vue中的数据双向绑定是订阅者模式加数据劫持，我们简单模拟下。

1. 定义要监听的对象

var data = {};

2. 监听input输入框的keyup事件

document.getElementById('demo').addEventListener('keyup',function (e) {
    data.val = e.target.value;
},false)

3. 用Object.defineProperty劫持监听的对象，然后赋值给div显示

Object.defineProperty(data,'val',{
    set: function (value) {
        document.getElementById('show').innerHTML = value;
    }
})