栗子來(lái)源(非本人):https://github.com/sindresorhus/on-change
on-change是一個(gè)可以監(jiān)聽(tīng)對(duì)象或者數(shù)組內(nèi)部變化的小工具，主要使用proxy來(lái)實(shí)現(xiàn)。以下是核心代碼：
// onChange 即要進(jìn)行的監(jiān)聽(tīng)操作
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,上面代碼可以對(duì)數(shù)組進(jìn)行操作就是因?yàn)橛昧藀roxy，具體的實(shí)現(xiàn)在get方法，每一層返回一個(gè)proxy，需要注意的是在監(jiān)聽(tīng)操作這里依然使用的是 es5的 defineProperty 方法。
