如何绑定到可观察属性，但显示一个非可观察的子属性？

可以使用计算的属性来实现绑定到可观察属性，同时显示非可观察子属性。下面是一个示例代码：

import { observable, computed } from 'mobx';

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

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

const person = new Person();
console.log(person.fullName);

在这个示例中，我们将 firstName 和 lastName 定义为可观察属性。我们定义了一个计算属性 fullName，它将 firstName 和 lastName 组合成完整的名字，并返回结果。由于 fullName 是计算属性，它将自动更新，当 firstName 或 lastName 更改时。

这使我们能够绑定到可观察属性 firstName 和 lastName，同时显示 fullName。例如，假设我们有一个显示 fullName 的输入框，当我们修改 firstName 和 lastName，它将自动更新显示的 fullName。