1.Vue中的数据代理:
通过vm对象来代理data对象中的属性操作(读/写)
2.Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过Object.defineProperty()把data对象中所有属性添加到vm上
为每一个添加到vm上的属性,都指定一个getter/setter
在getter/setter内部操作(读/写data)中对应的属性
数据代理:通过一个对象代理对另一个对象属性的操作(读/写)
具体程序
<body>
<div id="root">
</div>
<script>
Vue.config.productionTip = false
let number = 18
let person = {
name: 'fxy',
sex: 'man',
}
Object.defineProperty(person, 'age', {
// value: 18,
// enumerable: true, //控制属性是否可以被枚举,默认值是false
// writable: true, //控制属性是否可以被修改,默认值是false
// configurable: true,//控制属性是否可以被删除,默认值是false
get() {
return number
},
set(value) {
number = value
}
})
console.log(person)
</script>
</body>