用故事解读 MobX 源码（二）computed

2024-01-16 16:18:57

在上一篇文章中，我们已经介绍了 MobX 中的 observable 属性，它是一个可以被跟踪的属性，当它的值发生变化时，MobX 会自动更新所有依赖于它的 computed 属性的值。

在这一篇文章中，我们将继续介绍 MobX 中的 computed 属性。它是一个计算属性，它可以根据其他 observable 属性的值自动计算出自己的值，并且当这些 observable 属性的值发生变化时，computed 属性的值也会自动更新。这使得 MobX 非常适合构建响应式应用，因为它可以自动跟踪数据的变化并更新 UI，从而减少了开发人员的工作量。

computed 属性的定义

class Person {
  @observable name = '张三';
  @computed get fullName() {
    return `${this.name} 老师`;
  }
}

const person = new Person();
console.log(person.fullName); // 输出: 张三 老师

在这个例子中，fullName 是一个 computed 属性，它根据 name 属性的值自动计算出自己的值。当 name 属性的值发生变化时，fullName 属性的值也会自动更新。

computed 属性的用法

computed 属性可以被用在各种场景中，比如：

计算两个或多个 observable 属性的和、差、积、商等。
根据一个 observable 属性的值来判断另一个 observable 属性是否应该显示或隐藏。
根据一个 observable 属性的值来控制另一个 observable 属性的值。
将一个 observable 属性的值格式化成另一种格式。
将一个 observable 属性的值映射到另一个值。

computed 属性的优点

使用 computed 属性有以下优点：

提高代码的可读性和可维护性： computed 属性使代码更易于阅读和理解，因为它将复杂的计算逻辑封装在了一个单独的属性中。这使得代码更易于维护，因为当需要修改计算逻辑时，只需要修改 computed 属性即可，而不需要修改其他地方的代码。
提高性能： computed 属性可以提高性能，因为它只在需要的时候才会计算自己的值。这意味着当一个 computed 属性的值没有发生变化时，MobX 不会重新计算它的值，从而减少了不必要的计算。
实现响应式编程： MobX 是一个响应式框架，这意味着当 observable 属性的值发生变化时，所有依赖于它的 computed 属性的值都会自动更新。这使得 MobX 非常适合构建响应式应用，因为它可以自动跟踪数据的变化并更新 UI，从而减少了开发人员的工作量。