数据代理

首先何为数据代理，简单的说，就是通过一个对象代理对另一个对象中属性的操作（读/写）， 代码如下：

   //首先声明两个对象obj和obj2
   let obj = {x:100}
   let obj2 = {y:200}
                        
   //其次利用Object.defineProperty中的setter方法通过对象obj2来操作obj中的属性
    Object.defineProperty(obj2,'x',{
	set(value){
            obj.x = value
            }
	})

Vue中的数据代理

1.Vue中的数据代理：
            通过vm对象来代理data对象中属性的操作（读/写）
	2.Vue中数据代理的好处：
			更加方便的操作data中的数据
	3.基本原理：
                Vue通过Object.defineProperty()把data对象中所有属性添加到vm上。
		为每一个添加到vm上的属性，都指定一个getter/setter。
		在getter/setter内部去操作（读/写）data中对应的属性。
                
   代码如下：
    <!-- 准备好一个容器-->
<div id="root">
    <h2>学校名称：{{name}}</h2>
    <h2>学校地址：{{address}}</h2>
</div>

<script>
    const vm = new Vue({
	data(){
            return{
                name:'清华大学',
		address:'北京市清华园'
            }
        }
    }).$mount('#root')
</script>

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

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

鼠标放上去会提示 Invoke property getter 在实例的最下面还有着两个属性的 set和get 方法 

现在我们得知这两个属性是由Vue通过Object.defineProperty()添加上去的 所以当我们通过vm(vm.name)读name的时候实际读的就是data中的name 当我们改的时候(vm.name = '北京大学')改的也是data中的name。

就是说通过vm对象来代理data对象中属性的操作（读/写），这样更方便操作data中的数据。