计算属性

基于 state 二次处理数据。

标识：computed，或使用 makeAutoObservable 自动将所有的 getters 标识为 computed。

示例

下面的示例依靠 Reactions {🚀} (opens new window) 高级部分中的 autorun (opens new window) 来辅助说明计算值的意义。

import { makeObservable, observable, computed, autorun } 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)
// (不会重新计算!)
// 0

order.amount = 5
// Computing...
// (无需 autorun)

order.price = 2
// Computing...
// Total: 10

stop()

order.price = 3
// 计算值和 autorun 都不会被重新计算.

最佳实践

1. 它们不应该有副作用或者更新其他可观察对象。
2. 避免创建和返回新的可观察对象。
3. 它们不应该依赖非可观察对象的值

Options {🚀}

name

该字符串在 Spy event listeners (opens new window) 和 MobX developer tools (opens new window) 中用作调试名称。

equals

默认设置为 comparer.default。它充当一个比较函数，用于比较上一个值和下一个值。如果该函数认为两个值相等，那么观察者们将不会被重新计算。

内置 comparers

MobX 提供了四种内置的 comparer 方法，这些方法满足 computed 的 equals 选项的大多数需求：

• comparer.identity 使用全等 （===）运算符确定两个值是否相同。
• comparer.default 与 comparer.identity 相同，但是其认为 NaN 等于 NaN。
• comparer.structural 执行深层的结构比较以确定两个值是否相同。
• comparer.shallow 执行浅层的结构比较以确定两个值是否相同。

示例结构比较{👀}

当返回一个新的对象时，即时值一样，观察者们也会默认数据不一样，并会触发监察者。

如果需要进行结构比较可以使用 computed.struct。

点击查看代码

class Box {
    width = 0
    height = 0

    constructor() {
        makeObsevable(this, {
            x: observable,
            y: observable,
            topRight: computed({equals:'structural'})
        })
    }

    get topRight() {
        return {
            x: this.width,
            y: this.height
        }
    }
}

keepAlive

使计算属性的值在未被观察时被暂时停用。