数据监听并响应

在mobx中，监听数据并可执行的方式有三种，官方称之为reactions

autorun

import { autorun } from "mobx";

autorun在应用启动时就会被执行一次，然后其内部所依赖的状态数据发生改变后也会执行。这就像是Vue内的watch，不过需要对监听属性开启immediate。

when

import { when } from "mobx";

when通常传入两个是函数的参数，当fn1执行且返回值为true，则再继续执行fn2，否则不再执行。需要注意的是，在when一次调用和判断中，只会被执行一次返回true的响应，无论后续是否还满足判断，都不再执行fn2。而且像autorun一样，在初始化时就会立即执行，如果初始化时就条件满足，则执行fn2，后续不再对新状态判断执行。

这可以用于应用初始化时用户登录判断，未登录，则执行登录/注册流程。

reaction

import { reaction } from "mobx";

reaction 不同于autorun和when,但又非常相似。比如他可以被多次调用执行，但只在监听状态发生改变的情况下才被执行，不像autorun一来就执行。它可以接受两个函数参数，第一个函数的返回值作为第二个函数的第一个参数。

reaction(
  () => {
    // 这里可以执行一些相关逻辑操作，返回数据给下一个函数使用
    return store.count
  },
  (data/* 参数1函数的返回值 */, reaction) => {
    // 这里可以对 data 做进一步的处理
    // 或者根据判断调用 reaction内的方法阻止执行，达到 when 的效果
    // 调用 dispose 可以手动阻止 reaction 的监听
    reaction.dispose();
  }
);

谨慎地使用reactions，注意，表示谨慎使用autorun、when、reaction。

在这些reactions中，我们在业务上的操作应该依赖状态数据改变而作出相应的响应，比如用户退出登录，isLogin状态发生改变，该如何控制UI的改变和页面执行逻辑，而不能在这些内部随意更改数据状态的值。

computed和autorun

computed和autorun非常执行响应非常相似，但一定要注意的是，autorun是一个reactions，它的执行不能用于产生和返回结果。如果需要执行计算逻辑并返回结果，请使用computed。

不仅如此，computed可以缓存执行结果，在数据状态未发生改变的情况下，多次调用只会有一次调用被响应，其余都是取的缓存值，这一点和Vue如出一致。

提示

如果了解Vue，对computed和autorun就非常好理解，关系就像是computed和watch。