LegendState 中计算属性(computed)的观察机制解析

计算属性观察机制的背景

在状态管理库LegendState中，计算属性(computed)是一个非常重要的特性，它允许开发者定义派生状态，这些状态会根据其依赖项的变化自动更新。然而，在实际使用中，开发者可能会遇到计算属性观察机制不按预期工作的情况。

问题现象分析

当开发者尝试观察一个计算属性时，发现观察回调只在初始化时触发一次，后续依赖项的变化不会触发新的回调。例如：

const stateTest$ = observable({
  id: '1',
  items: [{ id: '1' }, { id: '2' }, { id: '3' }],
  selectedItem: computed(() => {
    return stateTest$.items.find(
      (_item) => _item.id.peek() === stateTest$.id.get()
    )
  })
})

observe(() => {
  console.log('Observed Selected Item:', stateTest$.selectedItem.get())
})

在这个例子中，当修改id属性时，观察回调不会再次触发。这是因为计算属性返回的是一个嵌套的observable对象，而观察机制没有正确追踪整个依赖链。

解决方案演进

临时解决方案

在2.x版本中，可以通过显式引用依赖项来强制观察机制工作：

observe(() => {
  console.log('Observed Selected Item:', stateTest$.selectedItem.get())
  console.log('Observed ID:', stateTest$.id.get())
})

或者在React组件中：

<Memo>{() => <div>{state$.id.get() && state$.selectedItem.get()?.price}</div>}</Memo>

根本性改进

在即将发布的3.0版本中，这个问题得到了根本性解决。新版本对计算属性机制进行了重构，使得嵌套observable的依赖追踪更加智能。主要改进包括：

1. 简化了计算属性的定义方式，不再需要显式使用computed函数
2. 自动追踪整个依赖链，包括嵌套的observable对象
3. 提供了更直观的API设计

新版本中的写法更加简洁：

const stateTest$ = observable({
  id: '1',
  items: [{ id: '1' }, { id: '2' }, { id: '3' }],
  selectedItem: () => {
    return stateTest$.items.find(
      (_item) => _item.id.peek() === stateTest$.id.get()
    )
  }
})

实际应用场景

这种改进特别适合处理复杂的状态关系，例如：

1. 电商应用中的购物车和选中商品
2. 团队协作应用中的团队和成员选择
3. 数据可视化中的筛选和派生数据

一个典型的多级选择场景可以这样实现：

const state$ = observable({
  teams: [
    { id: 'team1', players: [{id: 'player1'}, {id: 'player2'}] },
    { id: 'team2', players: [{id: 'player3'}, {id: 'player4'}] }
  ],
  selectedTeamId: "",
  selectedTeam: () => {
    return state$.teams.find(
      (team) => team.id.peek() === state$.selectedTeamId.get()
    )
  },
  selectedPlayerId: "",
  selectedPlayer: () => {
    return state$.selectedTeam.find(
      (player) => player.id.peek() === state$.selectedPlayerId.get()
    )
  }
})

最佳实践建议

1. 对于简单计算属性，直接使用箭头函数
2. 对于需要复用的计算逻辑，可以使用observable包装
3. 在React组件中，结合observer和Memo组件实现细粒度更新
4. 避免在计算属性中进行副作用操作
5. 对于深层嵌套对象，确保正确使用peek和get方法

总结

LegendState 3.0版本对计算属性的改进大大简化了复杂状态管理的实现，使得嵌套observable的依赖追踪更加智能和可靠。开发者现在可以更自然地表达状态之间的关系，而无需担心观察机制失效的问题。这一改进将显著提升开发体验和应用性能。