vue学习笔记--数据代理

目录

1.什么是数据代理？

2.vue数据代理: 

---

1.什么是数据代理？

数据代理：通过一个对象代理对另一个对象中属性的操作(读/写)。

下面我们通过一个简单的例子来了解什么是数据代理：

1.我们定义了两个对象 obj 和 obj2

2.然后通过Object.defineProperty() 方法给obj2的对象上面添加了一个属性 x 在配置对象中我们定义了get() 方法和 set() 方法  

3.当我们访问obj2的x属性时触发get() 方法把obj.x的值返回给我们

4.当我们修改obj2.x的值时候触发了set() 方法 把我们修改的值拿到并赋值给了obj.x

5.现在就实现了最简单的数据代理 不管我们如何操作obj2.x的值 它都会始终和obj.x的值保持一致

let obj = {x:100}
let obj2 = {y:200}
 
Object.defineProperty(obj2,'x',{
	get(){
		return obj.x
	},
	set(value){
			obj.x = value
	}
})

2.vue数据代理: 

vue数据代理：通过 vm 对象来代理 data 对象中属性的操作（读/写）。

好处：更方便的操作data中的数据

基本原理：
1). 通过Object.defineProperty(vm, key, {})给vm添加与data对象的属性对应的属性描述
2). 所有添加的属性都包含get/set方法
3). 在get/set方法中去操作data中对应的属性

下面我们通代码来演示一下：

	
		
		
		
		
	
	
		
		

			
名称：{{name}}
			
地址：{{address}}
		
	
 
	

 1.我们通过new Vue() 得到了一个 vm 实例对象 接下来我们打印 vm 实例对象

 2.在实例对象中出现了 name 和 address 两个属性

3.在实例的最下面还有着两个属性的 set和get 方法 

4.现在我们得知这两个属性是由Object.defineProperty()添加上去的

5.所以当我们通过vm读name的时候实际读的就是data中的name 当我们改的时候改的也是data中的name