proxy如何监听数据的变化
时间: 2024-03-13 13:42:38 浏览: 18
在 JavaScript 中,可以使用 `Proxy` 对象来监听数据的变化。当代理对象所代理的对象发生变化时,`Proxy` 对象会自动触发相应的拦截器方法,从而实现对数据变化的监听。
以下是一个简单的示例,用于监听一个对象的属性变化:
```javascript
let target = {
name: 'Alice',
age: 18
};
let handler = {
get: function(target, prop) {
console.log(`Getting property ${prop}`);
return target[prop];
},
set: function(target, prop, value) {
console.log(`Setting property ${prop} to ${value}`);
target[prop] = value;
// 触发数据变化的回调函数
if (prop === 'age') {
onAgeChanged(value);
}
}
};
let proxy = new Proxy(target, handler);
// 监听数据变化的回调函数
function onAgeChanged(newAge) {
console.log(`Age changed to ${newAge}`);
}
proxy.age = 20; // 执行 set 操作,输出 "Setting property age to 20",触发 onAgeChanged 回调函数
```
在上面的示例中,我们定义了一个 `target` 对象和一个 `handler` 对象,用来处理对 `target` 对象的访问和修改操作。当修改 `target.age` 属性时,会执行 `set` 拦截器,并触发相应的回调函数。
在 `set` 拦截器中,我们可以根据属性名来判断数据是否发生了变化。如果 `prop` 属性是 `age`,则说明 `target.age` 属性发生了变化,此时会触发 `onAgeChanged` 回调函数。通过这种方式,我们就可以实现对数据的监听和处理。