Vue中的数据代理_vue数据代理

        首先，什么是数据代理？

        我的理解就是通过一个对象代理另一个对象中的属性的操作。举个例子，对象obj1有一个属性X，我们通过另一个对象obj2去操作属性X，就是数据代理。

        大致了解了数据代理，那vue中的数据代理又是什么呢？

        Vue中的数据代理就是通过vm对象来代理data中的对象中属性的操作。

        Vue中数据代理有什么好处呢？

        能够更加方便的操作data中的数据。举个例子，如果没有数据代理，那我们在引用data中的数据时应该写成{{_data.name}}，而有了数据代理以后，再引用data中的数据时就可以直接写成{{name}}，这样对于编码和内存来说都是有益的。

        Vue数据代理的基本原理

        那就要提到一个最重要的方法object.defineProperty()，举个简单的例子

<script type="text/javascript">
    let number=18
    let person={
        name:'Bob',
        sex:'女'
    }
    // 向person对象中添加age属性
    Object.defineProperty(person,'age',{
        //当有人读取person 的age属性时，getter就会被调用，且返回值就是age的值
        get(){
            return number
        },
        //当有人修改person的age属性值时，setter就会被调用，且会收到修改的具体值
        set(value){
            number=value
        }
    })
</script>

        向利用object.defineProperty()方法向person对象中添加age属性，利用getter和setter对age属性值进行读取和修改。（注：在set（）方法中不能直接修改age的值，因为set方法是一旦有人修改了age属性的值就会触发，如果在set方法中直接修改，则会造成无限循环的现象）

        Vue中就是通过object.defineProperty()方法把data中的对象中所的属性添加到vm上，为每个添加到vm上的属性都指定一个getter/setter，在getter/setter内部去操作data中的对应属性。