|
? ? ? ? 首先，什么是数据代理？
? ? ? ? 我的理解就是通过一个对西昂代理另一个对象中的属性的操作。举个例子，对象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中的对应属性。
|