Javascript 跟踪对象更改

希望获得关于以下挑战的一些反馈/想法

我一直在致力于一个双向绑定库的开发工作，该库已经完成，剩下的是一个增强功能，并在寻找向前发展的最佳方法

我使用基本的getter/setter跟踪对象的属性（例如状态）。更改时执行例程以更新DOM。极其简化的示例：

var state = {propertyA:1,propertyB:2,propertyC:3}
state.forEach((prop) => {
    Object.defineProperty(state, prop, {
        set: function (newValue) {
            value = newValue;
            // routines to update the DOM based on the changed state
        },
        get: function () {
            return value;
        },
        enumerable: true,
        configurable: true
    });
}

但是，此运行时状态对象可能最终接收到新属性。我试图消除必须再次手动重新初始化所有属性的依赖性

因此，我需要跟踪state对象，并为附加属性添加必要的setter/getter。我尝试了以下操作，但尽管已将“可配置”设置为true，但仍不允许触摸状态对象

Object.defineProperty(window, 'state', {
    set: function (newValue) {
        value = newValue;
        // routine to apply setters/getters for the new properties
    },
    get: function () {
        return value;
    },
    enumerable: true,
    configurable: true
});

---

我真的很想避免像setInterval这样的超级讨厌的东西来检查对象的变化。关于如何处理这种情况有什么建议吗？

您可以使用

代理

对象简单地执行此操作

对于MDN：

代理对象用于定义基本代理的自定义行为 操作（如属性查找、赋值、枚举、函数 调用等）

let state={
物业a:1,，
财产b:2，
物业c:3
}
函数wrapObject（状态）{
常量处理程序={
获取：功能（对象、道具）{
log（“为prop:：”调用get”，prop）；
返回道具；
},
设置：功能（对象、属性、值）{
log（“为prop:：”，prop，“和value:”，value调用的集合）；
document.getElementById（“root”）.innerHTML=`prop:${prop}value:${value}`；
//其他代码
}
};
返回新代理（状态、处理程序）；
}
状态=wrapObject（状态）；
国家财产局a；
state.propertyD=4；
//3秒后通过添加新属性更新状态
设置超时（（）=>{
state.property=5；
}, 3000);
总的来说，这是一个难题。阵列呢？原语呢？大男孩喜欢Angular、React和Vue，当变化发生时不依赖事件触发；相反，他们选择使用一些扩散算法（在角度上，在输入数据上；在React和Vue中，在生成的DOM上）。今天有很多支持，非常好的建议！