Vue中的数据代理

学习视频：https://www.bilibili.com/video/BV1Zy4y1K7SH

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
Object.defineProperty：给一个对象添加属性
如果数据发生变化通过getter和sertter进行依赖收集通知Watcher进行视图更新
通过getter收集依赖，修改时通知watcher更新视图，对数据的操作（读/写）进行拦截

Object.defineProperty()三个参数

• 参数1：给哪个对象添加属性
• 参数2：添加的属性名
• 参数3：配置项

基础语法

这样写完了，person就有了age属性

通过这种方式给对象添加的属性不可枚举
如果想让它可枚举，可以添加enumerable:true配置项

需求：person对象的age属性是从number中读来的，如果number的数值改了，person对象中的age要跟着变

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

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

  // 当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值
  get() {
    console.log('有人读取age属性了')
    return number
  },

  // 当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值
  set(value) {
    console.log('有人修改了age属性，且值是', value)
    number = value
  }

})
// console.log(Object.keys(person))
console.log(person)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

set想要修改age的值要通过number修改，number = value，如果不加上，直接用person.age赋值去修改age的值是无法成功的。

数据代理的定义：通过一个对象代理对另一个对象中属性的操作

最简单的数据代理
e.g.通过obj2可以操作（读/改）obj1身上的x

let obj = { x: 100 }
let obj2 = { y: 200 }

Object.defineProperty(obj2, 'x', {
  get() {
    return obj.x
  },
  set(value) {
    obj.x = value
  }
})
1
2
3
4
5
6
7
8
9
10
11

obj2身上不仅有自身的y，还有x和操作x的get和set方法

Vue中如何应用数据代理

验证setter(通过vm修改name看看能不能影响data.name）

验证vm._data=data

<div id="root">
		<h2>学校名称：{{name}}</h2>
		<h2>学校地址：{{address}}</h2>
	</div>
	<script type="text/javascript">
		Vue.config.productionTip = false;
		
		let data = {
			name: '尚硅谷123',
			address: '北京'
		}

		const vm = new Vue({
			el: '#root',
			data:data

		})
	</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

Vue将data中的数据拷贝了一份到_data属性中，又将_data里面的属性提到Vue实例中(如name)，通过defineProperty 实现数据代理，这样通过geter/setter操作name，进而操作_data中的name。而_data 又对data进行数据劫持，实现响应式

总结

1. Vue中的数据代理:
   通过vm对象来代理data对象中属性的操作（读/写)
2. Vue中数据代理的好处:
   更加方便的操作data中的数据
3. 基本原理:
   通过object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。
   在getter/setter内部去操作（读/写）data中对应的属性。