Vue双向绑定的秘密：defineProperty

    我们开发常用vue的双向绑定，他双向绑定究竟是怎么实现的呢？其实是用到了Object.defineProperty,下面我们就先了解一下它包含的属性方法。

 /**
   * Object.defineProperty（定义属性）参数
   * 第一个，给谁定义属性
   * 第二个，定义的属性
   * 第三个，
  */
  let obj = {};
  Object.defineProperty(obj, 'name', {
    enumerable: false, // 是否可枚举
    writable: false, // 是否可以赋值
    configurable: false, // 是否可删除对象中的属性
    value: 2 // 设置name属性为2
  })

下面就简易的实现一下MVVM中的双向绑定（视图改变，数据改变；数据改变，视图改变）

MVVM

  let obj = {};
  let temp = {};
  Object.defineProperty(obj, 'name', {
    get() { // 取obj的name属性会触发
      return temp.name;
    },
    set(val) { // 给obj赋值会触发,而且会触发get
      temp['name'] = val;
      input.value = obj.name;
      div.innerHTML = obj.name;
    }
  })

  obj.name = '';  // 页面刚加载调用get方法
  input.value = obj.name; // js中可以直接用id名调用
  input.addEventListener('input', function() {
    obj['name'] = this.value;  // 输入框值变化时调用set
    div.innerHTML = obj.name;
  })

效果如下：

视图改变数据 数据改变视图