简单理解Vue的双向绑定实现

Object.defineProperty()

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

语法: Object.defineProperty(obj, prop, descriptor) 其中obj是定义属性的对象，prop是要定义或者修改的属性，descriptor是要定义或修改的属性描述符

存取描述符的可选键值：

get ： 当访问该属性时，会调用此函数
set ： 当属性值被修改时，会调用此函数

    var o = {}; // 创建一个新对象
    var bValue = 38;
    Object.defineProperty(o, "b", {
      get() { console.log('我被访问了'); return bValue; },
      set(newValue) { console.log('我被修改了'); bValue = newValue; },
      enumerable : true,
      configurable : true
    });
复制代码

Vue简单双向绑定

vue的双向绑定就是通过Object.defineProperty()进行数据变化拦截

var demo = document.getElementById('app')
    var obj = {}
    Object.defineProperty(obj,'message',{
      set(value) {
        console.log('我被修改了',value)
        demo.innerHTML = value
      },
      get() {
        console.log('我被访问了')
      }
    })
复制代码