前端之vue数据代理与劫持

Object.defineProperty()

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

Object.defineProperty(object, prop, descriptor);
参数: 对象.属性(字符串类型),{getter and setter}

用于数据与对象属性的双向绑定。

    let num;
    let person = {
      name: '张三',
      sex: '男',
    }

    Object.defineProperty(person, 'age', {
      get() {
        return num;
      },
      set(val) {
        num = val;
      }
    })

什么是数据代理

通过一个对象代理对另一个对象中的属性进行（读/写）操作。

通过 obj2 改变 obj1 的属性:

    let obj1 = {
      x: 100,
    }
    let obj2 = {
      y: 500,
    }

    Object.defineProperty(obj2, 'x', {
      get() {
        return obj1.x;
      },
      set(val) {
        obj1.x = val;
      }
    })

Vue中的数据代理

此处的vm相当于什么是数据代理中的obj2。

数据劫持

下一节: 前端之vue事件处理