Vue中的数据代理（知识小记）

数据代理概述

Object.defineproperty方法

JS也支持面向对象编程，也是有着对象和类这样的概念，我们常见创建对象的方法应该是这样：

let person={
	name:'AISMALL',
	sex:'女',
}

Object.defineProperty方法：可以给一个对象定义一个新属性或者修改一个对象的现有属性并返回此对象。

语法：Object.defineproperty('object', 'propName', 'descriptor');

参数解析：

• object ：要定义属性的对象。
• propName ：要定义或修改的属性的名称。
• descriptor：要定义或修改的属性描述符对象。

何为描述符对象？ 可以是数据属性。

• value：被定义的属性值，默认值为undefined。
• enumerable：控制属性是否可以枚举，默认值是false。
• writable：控制属性是否可以被修改，默认值是false。
• configurable:控制属性是否可以被删除，默认值是false。

举例如下：

<script type="text/javascript" >
	// 定义一个类，该类中有两个属性。
	let person = {
		name:'AISMALL',
		sex:'女',
	}
	// 给该类添加一个属性：age
	Object.defineProperty(person,'age',{
		value:18,		// 被定义的属性值。注意：此处写死了。
		enumerable:true, //控制属性是否可以枚举，默认值是false
		writable:true, 	//控制属性是否可以被修改，默认值是false
		configurable:true //控制属性是否可以被删除，默认值是false
</script>

为了更加灵活的设置这个属性值，可以使用getter和setter函数：

<script type="text/javascript" >
	// 定义一个变量
	let number = 18
	let person = {
		name:'AISMALL',
		sex:'女',
	}
	Object.defineProperty(person,'age',{
		//当有人读取person的age属性时，get函数(getter)就会被调用，且返回值就是age的值。
		// 此处使用number作为该返回值。
		get(){
			console.log('有人读取age属性了')
			return number
		},
		//当有人修改person的age属性时，set函数(setter)就会被调用，且会收到修改的具体值。
		set(value){
			console.log('有人修改了age属性，且值是',value)
			number = value
		}
	})
	console.log(person)
</script>

Vue中的数据代理

一个常见的Vue问题：Vue是如何实现双向数据绑定的？

• 答案1：数据劫持。即对象属性访问器属性中的 getter 函数和 setter 函数实现的数据劫持。

• 答案2：通过Object.defineproperty方法配合 setter 和 getter 实现的数据双向绑定，不过该方法只是做到了对数据的检测，对UI重新渲染它并没有做。

先来看看普通的数据代理：通过一个对象代理对另一个对象的属性的操作（读/写）。

<!-- 数据代理：通过一个对象代理对另一个对象的属性的操作（读/写）-->
<!-- 我obj2新增一个属性，该属性和obj的属性关联，通过操作obj2的新增属性进而操作obj的属性-->
<script type="text/javascript" >
	// 定义两个类
	let obj = {x:100}
	let obj2 = {y:200}
	// 通过defineProperty方法给对象obj2添加一个属性，该属性与obj对象属性关联。
	Object.defineProperty(obj2,'x',{
		get(){
			return obj.x
		},
		set(value){
			obj.x = value
		}
	})
</script>

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

Vue中数据代理的好处：更加方便的操作data中的数据

基本原理：

• 通过Object.defineProperty()把data对象中所有属性添加到vm对象上，这样就可以通过vm对象直接操作data对象的属性。
• 为每一个添加到vm上的属性，都指定一个getter/setter，通过getter/setter方法来建立添加到vm对象的属性和data对象中属性的关联。
• 操作添加到vm对象中的属性的时候，在getter/setter内部去操作（读/写）data中对应的属性。

举例如下：

<div id="root">
	<h2>姓名：{{name}}</h2>
	<h2>性别：{{sex}}</h2>
</div>
<script type="text/javascript">
	const vm = new Vue({
		el:'#root',
		data:{
			name:'AISMALL',
			sex:'女'
		}
	})
</script>

数据代理图示：