# 数据代理
通过一个对象代理对另一个对象中属性的操作(读/写)
# Object.defineProperty(Vue2)
基础使用代码段:
<body>
<script>
let number = 18;
let person = {
name: '张三',
sex: '男'
}
Object.defineProperty(person, 'age', {
value: 18,
enumerable: true, // 控制属性是否可以枚举,默认值false
writable: true, // 控制属性是否可以被修改,默认值false
configurable: true, // 控制属性是否可以被删除,默认值false
// 当有人读取person的age属性时,get函数(getter)就会被调用,且返回值就是age的值
get() {
console.log('有人读取age属性了');
return number;
},
// 当有人修改person的age属性时,set函数(settter)就会被调用,且收到具体需要修改的值
set(value) {
console.log('有人修改age属性了');
number = value
}
})
console.log(person);
</script>
</body>
实现简单的数据代理
<body>
<script>
let obj = { x: 100 }
let objProxy = {}
// 现在使用objProxy去代理obj,也就是通过objProxy去修改或者读取obj里面的x属性
Object.defineProperty(objProxy, 'x', {
get() {
return obj.x
},
set(value) {
obj.x = value
}
})
</script>
</body>