vue中的数据代理

什么是数据代理？

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）
代码：

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

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

上例代码主要功能是：通过obj2代理对另一个对象obj属性的操作。 即使用obj2.x = 3000可以修改obj.x的值。

vue中的数据代理

通过vm（我们定义的vue实例）代理对vm实例中data属性的操作

let vm = new Vue({
	el: '#app',
	data: {
		name: 'Jack',
		age: 18
	}
})

通过vm操作vm._data的属性：

vm.name = 'Mary'
vm.age = 20

原理：使用Object.defineProperty()

Object.defineProperty(vm, 'name', {
	get(){  return vm._data.name	},
	set(value){ vm._data.name = value  }
})

如果没有数据代理，那么操作vm._data中的数据方式将会变成下面这样：

<h1>{{_data.name}}</h1>
<h2>{{_data.age}}</h2>

总结：

• vue中的数据代理：通过vm对象来代理对象中属性的操作
• vue中数据代理的好处：更加方便的操作data中的数据
• 基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个setter/getter。在setter/getter内部操作data中的属性。