理解数据代理
通过一个对象代理另一个对象中的属性的操作 (读/写)
<script>
let obj = {x:100}
let obj2 = {y:200}
Object.defineProperty(obj2,'x'),{
get(){
return obj.x
},
ser(value){
obj.x = value
}
}
</script>
Vue中的数据代理
<div id="root">
<h1>
schoolName:{{name}}
</h1>
<h1>
schoolAddress:{{address}}
</h1>
</div>
<script>
Vue.config.produntionTip = false
const vm = new Vue({
el:'#root',
data:{
name:'shangguigu',
address:'beijing'
}
})
</script>
通过vm读写name/address用getter、setter读写data中的数据
在vm中vm._data存储了data中的数据,这里用了数据劫持
一旦data中的数据发生更改,vue会监测到,页面中的数据将会自动更新
总结
- 通过vm对象来代理data对象中的属性的操作
- 更加方便的操作data中的数据
334)]
总结
- 通过vm对象来代理data对象中的属性的操作
- 更加方便的操作data中的数据
- 通过Object.defineProperty()把data对象中所有属性添加到vm上,为每一个添加到vm上的属性都指定一个getter和setter,在setter和getter内部去操作data中的对应的属性