何为数据代理?
简单来说,数据代理就是通过一个对象代理对另一个对象中属性的操作(读/写)
为什么要数据代理?
为了更加方便的读取和修改_data
中的数据,不进行数据代理就只能通过vm._data.msg
访问数据
vue是如何实现数据代理的?
基本原理:通过Object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性,都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的属性。
那么 Object.defineProperty()又是干什么的呢?
let obj = {x:100}
let obj2 = {y:200}
//该方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Object.defineProperty(obj2,'x',{
//每当读取obj2.x的属性时就会调用get,并且返回obj2.x的值
get(){
return obj.x
},
//每当有人修改了obj2.x的值,就会调用set,并且set会接收到改变的那个值
set(value){
obj.x = value
}
})
总之,Object.defineProperty()会实现obj.x和obj2.x的双向绑定,只要其中一个值发生改变,
那么另一个值也会跟着变化,vue数据代理就是这个原理。
<div id="root">
<h2>学校名称:{{name}}</h2>
<h2>学校地址:{{address}}</h2>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#root',
data:{
name:'张三',
address:'北京'
}
})
只要向data中添加属性,那么vue自动帮我们添加了数据代理。