mobx 中@observable 和@observable.ref 修饰符有什么区别？

Question

Mobx 支持 @observable 和 @observable.ref 修饰符，他们的官方文档说

observable: This is the default modifier, used by any observable. It clones and converts any (not yet observable) array, Map or plain object into it's observable counterpart upon assignment to the given property

observable.ref: Disables automatic observable conversion, just creates an observable reference instead.

我不明白为什么我们需要为已经存在的 observable 创建一个 observable 引用。这两者有何不同以及它们的用例是什么？

Answer 1

observable.ref只会跟踪对对象的引用更改，这意味着您需要更改整个对象才能触发反应。因此，例如，如果您有一个通过引用跟踪的 observable 数组，则不会跟踪该数组的内容。此外，如果您将项目添加到数组中，也不会跟踪更改。

import { observable, reaction } from "mobx";

const test = observable(
  {
    reference: [{ id: 1 }]
  },
  {
    reference: observable.ref
  }
);

reaction(
  () => {
    return test.reference.length;
  },
  () => {
    console.log("Reaction 1: reference length changed");
  }
);
reaction(
  () => {
    return test.reference[0];
  },
  () => {
    console.log("Reaction 2: reference item changed");
  }
);

test.reference[0] = { id: 2 }; // this will not trigger the reactions
test.reference.push({ id: 3 }); // this will not trigger the reactions
test.reference.pop(); // this will not trigger the reactions

test.reference = []; // this will trigger both reactions

代码沙箱示例