数据代理

Object.defineproperty方法

    <script type="text/javascript">let number=18let person={name:'张三',sex:'男',}//age属性 不参与遍历Object.defineProperty(person,'age',{//value:18,//enumerable:true, //控制属性是否可以枚举，默认值是false//writable:true,//控制属性是否可以被修改，默认值是false//configurable:true //控制属性是否可以被删除，默认值是false//当有人读取person的age属性时，get函数就会被调用,且返回值就是age的值get(){console.log('有人读取age属性了')return number},//当有人修改person的age属性时，set函数(setter)就会被调用,且会收到修改的具体值set(value){console.log('有人修改了age的值,且值是',value)}})console.log(person)// console.log(Object.keys(person))/*for(let key in person){console.log(person[key])}*/</script>

数据代理

通过一个对象代理对另外一个对象属性的操作(读/写)

    <script type="text/javascript">let obj={x:100}let obj2={y:200}Object.defineProperty(obj2,'x',{get(){return obj.x},set(value){obj.x=value}})</script>

Vue数据代理

1. Vue中的数据代理通过vm对象来代理data对象中属性的操作（读/写）
2. Vue中数据代理的好处：更加方便的操作data中的数据
3. 基本原理
   a.通过object.defineProperty()把data对象中所有属性添加到vm上
   b.为每一个添加到vm上的属性，都指定一个getter setter
   c.在getter setter 内部去操作(读/写) data中对应的属性

Vue将data中的数据拷贝一份到_data属性中，又将_data里面的属性提到Vue实例中(如 name),通过defineProperty 实现数据代理，这样通过getter/setter 操作_data中的name。而_data又对data进行数据劫持，实现响应式

    <div id="root"><h1>工厂名称：{{name}}</h1><!--插值语法--><h1>工厂地址:{{address}}</h1></div><script type="text/javascript">Vue.config.productionTip =false let data={name:'赛特勒',address:'多威工业园'}//创建Vue实列const vm=new Vue({el:'#root', data //vm._data=options.data=data});