将MST视图中的getter改为无参普通函数，是否仍为计算值？

问题描述 #

我最近在看MobX State Tree（MST）的官方文档，对Views章节里的计算值写法有点疑问。如果把示例里的getter换成普通的无参函数，比如用getAmountOfChildren()替代get amountOfChildren()，像下面这样写：

const UserStore = types
  .model({ users: types.array(User) })
  .views(self => ({
    // vs. 'get amountOfChildren()'...
    getAmountOfChildren() {
      return self.users.filter(user => user.age < 18).length
    },
  }))

这个普通函数还会被当成计算值，拥有和getter一样的缓存、自动响应依赖变化这些特性吗？抱歉问这么基础的问题，就是突然纠结这个点...

回答 #

答案是不会，普通无参函数和MST Views里的getter有着本质区别：

• MST中用get语法定义的属性是计算值（computed values）：它会自动跟踪依赖的状态变化，只有当依赖的状态发生改变时才会重新计算结果，并且计算结果会被缓存——重复访问这个属性不会重复执行计算逻辑，能有效节省性能。
• 而你写的这种普通无参函数，每次调用都会完整执行一遍函数体内的逻辑：没有缓存机制，哪怕依赖的状态完全没变化，每次调用它都会重新过滤数组、计算长度；而且当状态变化时，它也不会自动更新结果，只有你手动再次调用它才能拿到新值。

举个实际场景的例子：假设users数组里有个用户的年龄从17改成19，用getter的amountOfChildren会自动感知到这个变化，更新为正确的数值；但用普通函数getAmountOfChildren()的话，只有你再次调用它的时候才会得到新结果，而且每次调用都要重新走一遍过滤计算的流程。

所以如果想要保留计算值的核心特性，还是得用get语法定义的getter，这是MST识别计算值的标准写法。

内容的提问来源于stack exchange，提问作者MikO