vue学习笔记6----数据代理

1、Object.defineProperty

用于给对象添加属性，并对该属性进行控制，可以设置setter和getter函数。

默认添加的属性不可枚举，不可修改，不可删除。

 <script>
        let person = {
            name:'jack',
            sex:'male',
            age:18  //直接添加age属性
        }
        console.log(Object.keys(person))


        let person1 = {
            name:'lucy',
            sex:'famale',
        }
        //通过object.defineproperty方法添加属性
        //这种方式添加的属性age默认不可枚举，不可修改，不可删除
        Object.defineProperty(person1,'age',{
            value:28,
            enumerable:true,   //控制属性是否可以枚举，默认为false
            writable:true,  //控制属性是否可以修改，默认为false
            configurable:true   //控制属性是否可以被删除，默认为false
        })
        //测试一下 
        console.log(Object.keys(person1))


        //使用for循环测试一下
        for(let key in person){
            console.log('@',person[key])
        }
        for(let key in person1){
            console.log('@',person1[key])
        }


        let num = 13
        let person2 = {
            name:'lucy',
            sex:'famale',
        }
        Object.defineProperty(
            person2,'age',{
                //每次访问person2的age属性时，get函数（getter）就会被调用，函数返回值就是age的值
                //一般简写为 get(){***}
                get:function(){
                    return num
                },
                
                //当有人修改person2的age属性时，set函数（setter）就会被调用，其参数value为修改的具体值
                set(value){
                    console.log('修改age属性为',value)
                    // 该例中，age属性的值来自于num，若要修改age的值就需要修改num，
                    // 直接在控制台person2.age=188是无效的
                    num = value
                }
            }
        )


    </script>

2、什么是数据代理

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

例：

<script>
        //两个对象a和b，分别有属性x和y
        let a = {x:100}
        let b = {y:200}

        //希望能够通过b 访问/修改 a的属性x
        Object.defineProperty(b,'x',{
            get(){
                return a.x
            },
            set(value){
                a.x = value
            }
        })
</script>

3、vue中的数据代理

 解析：

总结：

1.vue中的数据代理：通过vm对象来代理对data对象中属性的操作（读/写）。

2.vue中数据代理的好处：更加方便的操作data中的数据。

3.基本原理：

        通过object.defineProperty( ) 把data对象中所有属性都添加到vm上。每个属性都有setter和getter函数，在setter和getter函数内部去操作data中对应的属性。