javascript - 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)

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

console.log(store.items[0])

这被触发是因为被取消引用的可观察对象发生了变化。

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;
}