2.Vue中的数据代理

Vue中的数据代理

前言

要先了解Vue中的数据代理，需要先了解js中的Object.defineProperty方法:

<script type="text/javascript" >
    let number = 18;
    let person = {
        name:'张三',
        sex:'男',
    }

    Object.defineProperty(person,'age',{
        // value:18,
        // enumerable:true, //控制属性是否可以枚举，默认值是false
        // writable:true, //控制属性是否可以被修改，默认值是false
        // configurable:true //控制属性是否可以被删除，默认值是false

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

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

    });

    // console.log(Object.keys(person));

    console.log(person);
</script>

1.Vue中的数据代理是什么?

通过vm对象来代理data对象中属性的操作（读/写）。

2.Vue中数据代理的好处

更加方便的操作data中的数据。
比如你的data中有个name属性，你可以用{{_data.name}}来取值，
但是Vue数据代理后，你可以直接用{{name}}来取值。

3.基本原理

通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter。
在getter/setter内部去操作（读/写）data中对应的属性。

Vue数据代理的基本原理如下图所示: