Vue 数据代理

Vue 数据代理

Object.defineProperty 使用方法

let person = {
  name: "zhang san",
  sex: "male"
}

// ObjectConstructor.defineProperty<any>(
//   o: any, 目标对象
//   p: PropertyKey, 键
//   attributes: PropertyDescriptor & ThisType<any>): any 配置项
Object.defineProperty(person, age, {
  value: 18,
  enumerable: true, // 默认不可遍历 枚举keys
  writable: true, // 默认不可修改
  configurable: true, // 默认不可删除
})

console.log(Object.keys(person)); // ['name', 'sex']

将对象的某个属性与其他变量绑定：

let number = 18
let person = {
  name: "zhang san",
  sex: "male"
}

Object.defineProperty(person, 'age', {
  // 当读取person的age属性时，get函数就会被调用，返回值就是age值
  get: function() {
    return number
  },

  // 修改person的age时，调用set函数
  set(value){
    number = value
  }
})

console.log(person);

何为数据代理

通过一个对象代理对另一个对象种属性的操作（读写）

// 通过 obj2 修改 obj 中属性
let obj = {x: 100}
let obj2 = {y: 200}

Object.defineProperty(obj2, 'x', {
  get(){
    return obj.x
  }

  set(value) {
    obj.x = value
  }
})

Vue 中数据代理

通过ｖｕｅ对象来代理类ｄａｔａ对象中的属性操作，更加方便的操作ｄａｔａ中的值。

Vue 实例中data的数据通过 Object.defineProperty 绑定到Vue对象中的 _data。
vm._data = data

由图可见，Vue对象中添加了对于 name、address 的getter setter

数据代理图示：

１．创建ｖｕｅ对象，在对象中添加　＿ｄａｔａ　属性，完全复制ｄａｔａ的值。
２．再在ｖｕｅ对象中添加ｇｅｔｔｅｒ、ｓｅｔｔｅｒ