栗子来源(非本人):https://github.com/sindresorhus/on-change
on-change是一个可以监听对象或者数组内部变化的小工具,主要使用proxy来实现。以下是核心代码:
// onChange 即要进行的监听操作
module.exports = (object, onChange) => {
const handler = {
get(target, property, receiver) {
try {
return new Proxy(target[property], handler);
} catch (err) {
return Reflect.get(target, property, receiver);
}
},
defineProperty(target, property, descriptor) {
onChange();
return Reflect.defineProperty(target, property, descriptor);
},
deleteProperty(target, property) {
onChange();
return Reflect.deleteProperty(target, property);
}
};
return new Proxy(object, handler);
};
get
defineProperty
defineProperty,上面代码可以对数组进行操作就是因为用了proxy,具体的实现在get
方法,每一层返回一个proxy,需要注意的是在监听操作这里依然使用的是 es5的 defineProperty 方法。