数据代理

Object.defineproperty方法

    <script type="text/javascript">
        let number=18
        let 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
        });