Vue中的数据代理

何为数据代理?

简单来说，数据代理就是通过一个对象代理对另一个对象中属性的操作（读/写）

为什么要数据代理？

为了更加方便的读取和修改_data中的数据，不进行数据代理就只能通过vm._data.msg访问数据

vue是如何实现数据代理的?

基本原理：通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作（读/写）data中对应的属性。

 那么 Object.defineProperty()又是干什么的呢？

	let obj = {x:100}
	let obj2 = {y:200}
        //该方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
			Object.defineProperty(obj2,'x',{
                //每当读取obj2.x的属性时就会调用get，并且返回obj2.x的值
				get(){
					return obj.x
				},
                //每当有人修改了obj2.x的值，就会调用set，并且set会接收到改变的那个值
				set(value){
					obj.x = value
				}
			})

总之，Object.defineProperty()会实现obj.x和obj2.x的双向绑定，只要其中一个值发生改变，

那么另一个值也会跟着变化，vue数据代理就是这个原理。

<div id="root">
			<h2>学校名称：{{name}}</h2>
			<h2>学校地址：{{address}}</h2>
		</div>
	</body>

	<script type="text/javascript">
		
		
		const vm = new Vue({
			el:'#root',
			data:{
				name:'张三',
				address:'北京'
			}
		})

 只要向data中添加属性，那么vue自动帮我们添加了数据代理。