MobX 自动运行行为

Question

我正在探索 MobX 并被一个问题所吸引：

如果我有这个 observable：

class ItemsStore {
    @observable items = [1,2,3];
}
const store = new ItemsStore;

然后这样改：

setInterval(() => {
    store.items[0] = +new Date
}, 1000)

我注意到以下几点：

autorun(() => console.log(store.items)); never fires...
autorun(() => console.log(store.items[0])); fires every 1s and gives a new value
autorun(() => console.log(store.items.length)); fires every 1s although value is unchanged

这背后的API逻辑是什么？我希望因为 store.items 永远不会触发，所以 未更改的属性 会表现相同。

为什么 MobX 知道我的回调中有什么代码？它在分析我传递给 autorun 的回调吗？

Answer 1

console.log(store.items)

当在上一个 auto运行中取消引用的 observable 发生更改时，将触发 auto运行。 store.items 不取消引用任何可观察对象。尝试 store.items.slice() 或 store.items.toJS() 以获得所需的效果。

console.log(store.items[0])

这被触发是因为取消引用的 observable 发生了变化。

console.log(store.items.length)

这是运行因为 MobX 数组不是真正的数组。 length 属性是 defined as follows:

Object.defineProperty(ObservableArray.prototype, "length", {
    enumerable: false,
    configurable: true,
    get: function(): number {
        return this.$mobx.getArrayLength();
    },
    set: function(newLength: number) {
        this.$mobx.setArrayLength(newLength);
    }
});

getArrayLength reports that the MobX array has been observed:

getArrayLength(): number {
    this.atom.reportObserved();
    return this.values.length;
}

MobX 自动运行行为

MobX autorun behavior

javascript

mobx