笔记内容来自于 b 站教学视频 尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通 张天禹老师
数据代理
Object.defineProperty
可枚举
- 如果在属性上直接定义这个 age 属性，这个属性在控制台输出时属性名的颜色与其它属性是相同的，表示可以枚举（遍历）。
- 使用
Object.defineProperty添加的属性，在浏览器控制台输出时，属性名的颜色会淡一点，这个淡一点表示的是，这个属性是不可以被枚举的。
- 如果想让使用
Object.defineProperty添加的属性可枚举，可以配置enumerable: true，控制属性是否可枚举，默认值是 false，即不可枚举。
可修改
- 如果在属性上直接定义这个 age 属性，这个属性是可以被修改的。
- 使用
Object.defineProperty添加的属性，不可以被修改。
- 如果想让使用
Object.defineProperty添加的属性可修改，可以配置writable: true，控制属性是否可以被修改，默认值是 false，即不可修改。
可删除
- 如果在属性上直接定义这个 age 属性，这个属性是可以被删除的。
- 使用
Object.defineProperty添加的属性，是不可以被删除。
- 如果想让使用
Object.defineProperty添加的属性可修改，可以配置configurable: true，控制属性是否可以被删除，默认值是 false，即不可删除。
getter
- 这种普通写法，number 和 age 仅限于在刚开始定义的时候有关系，age 的值是 number 的值，后续再修改 number 的值，则 age 的值不会自动跟着变化。
- 使用
getter时，当有人读取 person 的 age 属性时，get 函数（getter）就会被调用，且返回值就是 age 的值。这样，number 就与 age 建立起了关联。
- 查看控制台可以注意到，使用 getter 设置 age 值时，控制台的 age 属性后是
...，鼠标悬浮提示Invoke property getter，表示每次读取，都从 getter 重新获取。
setter
- 当有人修改 person 的 age 属性时，set 函数（setter）就会被调用，且会收到修改的具体值。
数据代理的概念
- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
<!-- 数据代理：通过一个对象代理对另一个对象中属性的操作（读/写） -->
let obj = {x: 100}
let obj2 = {y: 200}
Object.defineProperty(obj2, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
}
})
Vue 中的数据代理
- Vue 中的数据代理：
通过 vm 对象来代理 data 对象中属性的操作（读/写） - Vue 中数据代理的好处： 更加方便的操作 data 中的数据
- 基本原理：
- 通过
Object.defineProperty()把 data 对象中所有属性添加到 vm 上。 - 为每一个添加到 vm 上的属性，都指定一个 getter/setter。
- 在 getter/setter 内部去操作（读/写）data 中对应的属性。
- 通过
