VUE-响应式-数据代理

1.1 Object.defineProperty()：定义对象属性的特性

1.1.1 小知识

正常方式定义对象的属性,可以看到： sex: "男"是高亮的

let person = {
  name: '张三',
  sex: '男',
  age: 18
}

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

使用Object.defineProperty()定义属性，可以看到：age: 18非高亮，代表该属性不可枚举

let person = {
  name: '张三',
  sex: '男',
  // age: 18
}

Object.defineProperty(person, 'age', {
  value: 18
})

console.log(Object.keys(person)); // ['name', 'sex']   没有age,说明此时age不可枚举

1.1.2 配置项

Object.defineProperty(person, 'age', {
  enumerable: true, // 控制属性是否可以枚举，默认值是false
  writable: true, // 控制属性是否可以被修改，默认值是false
  configurable: true, // 控制属性是否可以被删除，默认是false
  value: 18
})

1.1.3 小需求

需求：存在一个变量number, person.age的值随着number的值的变化而变化，number也要随着person.age的变化而变化

let number = 18;
let person = {
  name: '张三',
  sex: '男',
  // age: number
}

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

可以看到，person的age属性具有了get、set，并且代理了number变量

1.1.4 数据代理的定义

定义：通过一个对象，代理对另一个对象中的属性的操作（读&写）

obj2.x代理了obj1.x

let obj1 = {
  x: 100
}

let obj2 = {
  y: 200
}

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

1.1.5 VUE中数据代理的应用

vm代理了配置项中的data

<div id="root">
  <h2>名称: {{ name }}</h2>
  <h2>地址: {{ address }}</h2>
</div>

<script>
  const vm = new Vue({
    el: '#root',
    data: {
      name: 'aaa',
      address: 'bbb'
    }
  });
</script>