MobX 中计算的内容

MobX 是一个基于观察者模式的状态管理库，它提供了一种简单的方式来处理应用程序的状态更新。

在 MobX 中，计算属性是非常重要的一个概念。计算属性是根据已有的状态值进行计算并返回一个新的值的属性，这些属性会随着状态值的变化而自动更新。

定义计算属性

在 MobX 中，通过使用 computed 函数来定义计算属性。下面是一个例子：

import { observable, computed } from 'mobx';

class Store {
  @observable items = [1, 2, 3];

  @computed get itemCount() {
    return this.items.length;
  }
}

const myStore = new Store();
console.log(myStore.itemCount); // 输出 3

myStore.items.push(4);
console.log(myStore.itemCount); // 输出 4

在上面的例子中，我们定义了一个名为 itemCount 的计算属性，它返回 items 数组的长度。每当 items 数组发生变化时，itemCount 计算属性的值也会相应地更新。

计算属性的依赖

MobX 会自动地追踪计算属性所依赖的状态值，并在这些状态值发生变化时重新计算计算属性的值。例如：

class Store {
  @observable firstName = 'John';
  @observable lastName = 'Doe';

  @computed get fullName() {
    return `${this.firstName} ${this.lastName}`;
  }
}

const myStore = new Store();
console.log(myStore.fullName); // 输出 "John Doe"

myStore.firstName = 'Jane';
console.log(myStore.fullName); // 输出 "Jane Doe"

在上面的例子中，我们定义了一个名为 fullName 的计算属性，它依赖于 firstName 和 lastName 这两个状态值。当其中任何一个状态值发生变化时，fullName 计算属性的值也会相应地更新。

缓存计算属性的值

默认情况下，MobX 计算属性的值是根据状态值进行实时计算的。但是，有时候我们可能希望对计算属性的值进行缓存，以避免重复计算。在这种情况下，我们可以使用 computed 函数的 options 参数来指定缓存行为。例如：

class Store {
  @observable items = [1, 2, 3];

  @computed({ cache: false }) get itemCount() {
    console.log('计算 itemCount');
    return this.items.length;
  }
}

const myStore = new Store();
console.log(myStore.itemCount); // 输出 "计算 itemCount" 和 3

console.log(myStore.itemCount); // 输出 3，缓存了计算结果

在上面的例子中，我们将 cache 选项设置为 false，表示不缓存计算属性的值。这样，每次访问 itemCount 计算属性时，都会重新计算其值。如果我们将 cache 选项设置为 true，那么 MobX 就会缓存 itemCount 计算属性的值，避免重复计算。

总结

通过使用 MobX，我们可以轻松地定义计算属性，并且它们会随着状态值的变化而自动更新。计算属性能够提高代码的可读性和可维护性，并且在一些情况下还能优化性能。在实际开发中，我们应该充分利用 MobX 计算属性的特性，编写出高效而简洁的代码。