Computed

Computed 是用来从其他可观察对象中派生新的信息的，一般都会采用惰性求值和缓存输出等方法来处理，而且 Computed 也只有在其依赖的可观察对象发生改变的时候才会重新计算。Computed 可以有效的减少需要存储的 State 数量，所以在任何情况下，请尽可能的优先使用 Computed。

在使用 makeAutoObservable 对对象进行标记的时候，它会自动的将所有的 Getter 都标记为 computed。以下是一个官方的示例，可以直接运行观察一下效果。

import { makeObservable, observable, computed, autorun } from 'mobx';

class OrderRecord {
  price = 0;
  amount = 1;

  constructor(price) {
    makeObservable(this, {
      price: observable,
      amount: observable,
      total: computed
    });
    this.price = price;
  }

  get total() {
    console.log('Computing...');
    return this.price * this.amount;
  }
}

const record = new OrderRecord(0);
const stop = autorun(() => {
  console.log(`Total: ${record.total}`);
});

console.log(record.total);
record.amount = 5; // 不会重新计算，因为 total 依旧是 0
record.price = 2; // 会重新计算，因为 total 发生了变化
stop();
order.price = 3; // 不再计算，监控过程已经结束

在使用 Computed 的时候，需要遵守以下三个原则：

Computed 不应该有任何副作用。
Computed 不能更新任何可观察对象。
不能创建和返回新的可观察对象。

因为 Getter 一般都作为 Computed 出现，所以与 Getter 相对应的 Setter 都作为 Action 出现。

Live with React

Computed