使用 computeds 派生信息
用法：
-
computed注解 (es规范中称之为装饰器) computed(options)computed(fn, options?)
Computed值可用于从其他可观测值(observables)中派生信息。它们惰性求值，缓存输出，并且仅在基础可观察项之一发生更改时才重新计算。如果他们没有被使用，则不会计算。
从概念上讲，它们与电子表格中的公式非常相似，因此很重要。它们有助于减少必须存储的状态数量，并进行了高度优化。因此请尽可能使用它们。
示例
Computed值可以通过在JavaScript getters 上添加computed来创建，使用makeObservable来声明一个getter为computed。如果你希望将所有getter自动声明为compute，可以使用makeAutoObservable，observable或extendObservable。
为了帮助说明计算值的重点，下面的示例依赖于Reactions{}高级部分的autorun。
import { makeObservable, observable, computed } from "mobx"
class OrderLine {
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 order = new OrderLine(0)
const stop = autorun(() => {
console.log("Total: " + order.total)
})
// Computing...
// Total: 0
console.log(order.total)
// (No recomputing!)
// 0
order.amount = 5
// Computing...
// (No autorun)
order.price = 2
// Computing...
// Total: 10
stop()
order.price = 3
// Neither the computation nor autorun will be recomputed.
上面的示例很好地演示了computed值的好处，它充当缓存点。尽管我们改变了amount，它会触发total的重新计算，但是它不会触发autorun，因为total检测到输出没有改变，因此不需要更新autorun。
相比之下，如果不对total进行computed，则autorun将运行3次，因为它直接取决于total和amount。自己尝试一下.
规则
使用computed值时，有以下几个最佳实践：
1.它们不应有副作用或更新其他observables变量
2.避免创建和返回新的observables变量
提示
- 如果没有被
observed，computed值将终止
有时，它会使MobX新手感到困惑，这些人可能曾经使用过Reselect之类的库，如果您创建了一个计算属性，但没有在任何reaction中使用，则该属性不会被记住，并且似乎比必要时要重新计算的次数更多。例如，如果我们通过调用console.log(order.total)两次来扩展上述示例，则在调用stop()之后，该值将被重新计算两次。
这使MobX可以自动挂起那些未在使用的计算，以避免不必要地更新未访问的计算值。但是，如果某个computed属性没有在reaction中使用，则每次请求其值时都会对计算表达式求值，因此它们的行为就像普通属性一样。
如果仅观察计算的属性似乎无效，但是将其应用于使用observer，autorun等的项目时，将会非常有效。
以下代码演示了该问题：
// OrderLine has a computed property `total`.
const line = new OrderLine(2.0)
// If you access `line.total` outside of a reaction, it is recomputed every time.
setInterval(() => {
console.log(line.total)
}, 60)
可以通过使用keepAlive选项设置注释（try it out yourself）或通过创建无操作的autorun(()=> {someObject.someComputed})来覆盖它，并且以后可以根据需要进行清理。请注意，这两种解决方案都有造成内存泄漏的风险。在此处更改默认行为是一种反模式。
MobX也可以配置computeRequiresReaction选项，以在从reactive context之外访问计算对象时报告错误。
- computed值可以有setter
也可以为计算值定义setter。请注意，这些setter不能用于直接更改计算属性的值，但是可以被用作逆运算。Setters会被自动标记为actions。例如：
class Dimension {
length = 2
constructor() {
makeAutoObservable(this)
}
get squared() {
return this.length * this.length
}
set squared(value) {
this.length = Math.sqrt(value)
}
}
-
computed.struct用于比较输出结构的不同
如果在结构上等同于先前值的计算值的输出不需要通知observer，则可以使用calculated.struct。在通知观察者之前，它将首先进行结构比较，而不是进行相等性检查。例如：
class Box {
width = 0
height = 0
constructor() {
makeObsevable(this, {
x: observable,
y: observable,
topRight: computed.struct
})
}
get topRight() {
return {
x: this.width,
y: this.height
}
}
}
默认情况下，一个computed输出将通过引用进行比较。由于上述示例中的topRight始终会返回一个新的结果对象，因此永远不会将其视为等于先前的输出。除非使用了calculated.struct。
但是，在上面的示例中，我们实际上不需要calculated.struct！计算值通常仅在值发生更改时才重新计算。这就是topRight只对width或height的变化做出反应的原因。由于任何更改都会得到一个不同的topRight坐标，compute.struct将永远不会有缓存命中，并且会浪费精力，因此我们不需要它。
在实践中，compute.struct的作用远不如听起来有用。只有当基础observables的更改仍然会导致相同的输出时才使用它。例如，如果我们首先对坐标进行四舍五入，则即使基础值不是，四舍五入的坐标也可能等于先前的四舍五入的坐标。
请检查equals选项来自定义输出是否改变。
带参数的计算值
尽管getters不接受参数，但这里讨论了几种与需要参数的派生值一起使用的策略。使用
compute(expression)创建独立的计算值
computed也可以直接作为函数来引用，就像使用observable.box创建一个独立的计算值。在返回的对象上使用.get()以获取计算的当前值。这种形式的computed并不经常使用。但是在某些情况下，当您需要在其中传递boxed的计算值时，可能很有用， 这里讨论一种这样的情况。
Options {}
通常，computed的行为表现为您希望的方式，但是可以通过传入options参数来自定义其行为。
name
该字符串在Spy event listeners和MobX developer tools中用作调试名称。
equals
默认为comparer.default。它用作前后两个值的比较。如果此函数认为值相等，那么将不会重新评估observers。
这在处理其他库中的结构数据和类型时很有用。例如，一个 moment 实例可以用(a, b) => a.isSame(b)来判断是否相等。如果要使用structural/shallow比较来确定新值是否与先前值不同，comparer.structural和comparer.shallow会派上用场，并因此将其通知observers。
检查上面的computed.struct 部分。
内置comparers
MobX提供了四种内置的comparer比较器方法，这些方法可以满足大多数computed的equals需求：
-
comparer.identity使用===来判断两个值是否相等。 -
comparer.default和comparer.identity相同，但是NaN等于NaN。 -
comparer.structural执行深入的结构比较，以确定两个值是否相同。 -
comparer.shallow执行浅层结构比较，以确定两个值是否相同。
您可以从mobx导入comparer以访问这些方法。也可以在reaction中使用。
requiresReaction
建议在需要大量计算时将此值设置为true。如果您尝试reactive context在之外读取其值（在这种情况下可能不会被缓存），它可能导致页面无更新。
keepAlive
该设置可以避免未被观察的计算值挂起（请参见上面的说明）。该设置有可能导致内存泄漏，就像在 reactions中讨论的一些情况。