【Vue】defineProperty与数据代理

0 前言

defineProperty在Vue中有着广泛的应用，其设计及使用思想也很值得学习与借鉴。在Vue2中，用defineProperty实现了数据代理。
另外，应当注意，Vue3中改用proxy实现数据代理，这与Vue2不同。

1 defineProperty

1.1 是什么

Object.defineProperty，defineProperty是js对象的方法。

1.2 目标需求

1. person有name和sex，要给person添加age属性。
2. 读取person.age，就获得number值

   number改变，则person.age改变

3. 修改person.age，同时修改number值

   person.age改变，则number改变

1.3 代码实现

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

Object.defineProperty(person,'age',{
	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
	}
})

1.4 说明

与直接使用下文代码不同，用defineProperty可以实现更加复杂的属性需求（枚举、修改、删除）。另外，下文代码也只能实现对象创建时的赋值，number与age无法数据绑定，无法再次相互改变。

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

---

2 数据代理

2.1 是什么

两个对象，一个是obj1，另一个是obj2
读obj2.x，则读到obj1.x。即：obj1.x改变，则obj2.x改变
改obj2.x，则改了obj1.x。即：obj2.x改变，则obj1.x改变
obj2，代理了obj1

2.2 示意代码

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

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

2.3 Vue中的数据代理

需要搞清楚两个问题，是什么，怎么做。

2.3.1 是什么

MVVM中，M（Model，数据）、V（View 视图）这两者中的数据要实现数据双向绑定。
怎么实现他们呢？就是用VM（ViewModel）来实现，而这件事，就是Vue在做的事情。

2.3.2 怎么做

我们来看目标代码

const vm = new Vue({
			el:'#root',
			data:{
				name:'尚硅谷',
				address:'宏福科技园'
			}
		})

Vue（Vue2，下略）中：

1. 先通过Object.defineProperty()，把data对象中的属性，添加到vm上。
2. 在添加时，会创建好getter/setter
3. 通过getter/setter，就能实现data中属性的数据代理

3 其他

以上仅是对课程重点的笔记整理，但不代表课程内容的全部。
其实只要理解了Object.defineProperty，那么数据代理的原理就不是那么复杂了。
但是数据代理、双向绑定又绝不仅仅只有defineProperty。
输出vm对象，展开详细查看里面的属性，还有非常多细节的知识。
而关于getter、setter，也不仅仅是个简单的定义，“读取时”、“修改时”这两个词，就有一些知识点，并且也与vm对象的详细属性有关，很有意思。
如果只是简单了解理解，那么本文内容已经足够，如果有兴趣学习更细节的内容，建议二倍速跳着看一下这三节课。
更多数据双向绑定有关的信息，有机会再补充更新。

4 参考

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通

5 扩展阅读

【Vue】Vue2，Vue3 学习笔记
【Vue】初识Composition Api
【Vue】Mixin相关问题解析
【Vue】defineProperty与数据代理