第一章 Vue核心 第六节 数据代理

6.1  回顾Object.defineProperty方法

    代码示例：
    let number = 21;
    let person = {
        name:'retrace',
        sex:'female'
    }
    //给对象添加属性
    Object.defineProperty(person,'age',{//此方法添加的属性默认不可枚举
        // value:number,
        // enumerable:true,   //控制属性是否可以枚举，默认值是false
        // writable:true,     //控制属性是否可以被修改，默认值是false
        // configurable:true,  //控制属性是否可以被删除，默认值是false

        //当有人读取person的age属性时，get函数就会被调用，且返回值就是age的值
        get:function (){      //可简写为 get(){}
            console.log('有人获取了age属性');
            return number;
        },

        //当有人修改person的age属性时，set函数就会被调用，且会收到修改的具体值
        set:function (value){     //可简写为 set(value){}
            console.log('有人修改了age属性，且值是',value);
            number = value;
        }
    });

    console.log(person);

    const vm = new Vue({
        el:'#root',
        data:{
            name: 'retrace',
            sex:'female',
            age:21
        }
    });

 

6.2  何为数据代理

    数据代理：通过一个对象代理另一个对象中的属性的操作（读/写）
    模拟数据代理：
    let obj = {x:100};
    let obj2 = {y:200};

    Object.defineProperty(obj2,'x',{
        get(){
            return obj.x;
        },
        set(value){
            obj.x = value;
        }
    });

 

6.3  Vue中的数据代理

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

    示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue中的数据代理</title>
    <!--引入Vue-->
    <script src="../lib/vue.js"></script>
</head>
<body>
    <!--准备好一个容器-->
    <div id="root">
        <h1>姓名：{{name}}</h1>
        <h1>年龄：{{age}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;
        let data = {
            name:'retrace',
            age:21
        }
        const vm = new Vue({
            el:'#root',
            data
        });
        console.log(vm);
    </script>
</body>
</html>
posted @ 2021-10-14 18:06  何以之  阅读(57)  评论(0)    收藏  举报