如何在编程中高效且稳妥地监听值的变化？

const obj = new Proxy({ bar: 1 }, {
    set(target, prop, value) {
        console.log('值已更新:', prop, ':', value);
        target[prop] = value; // 必须手动设置值
        return true; // 返回true表示设置成功
    }
});

obj.bar = 2; // 输出: 值已更新: bar : 2

// 发布者
class Emitter {
    events = {};
    on(eventName, listener) {
        (this.events[eventName] || (this.events[eventName] = [])).push(listener);
    }
    emit(eventName, ...args) {
        (this.events[eventName] || []).forEach(listener => listener(...args));
    }
}

// 数据类
class Data {
    emitter = new Emitter();
    data = {};
    set(key, value) {
        this.data[key] = value;
        this.emitter.emit('dataChange', key, value);
    }
    get(key) {
        return this.data[key];
    }
}

// 使用示例
const data = new Data();
data.emitter.on('dataChange', (key, value) => console.log(`'${key}' changed to '${value}'`));
data.set('foo', 'bar'); // 输出: 'foo' changed to 'bar'