重点并不在 watch 上，declarative ui 是 model -> view 的映射。理论上只要给定了一个确定的状态，state 也好 data 也好，都能生成一个确定的 ui。

react 里面 newState = reduce(oldState, action)，这是一个非常确定的状态。举一个不太恰当的例子：
import { reactive, watch, toRef } from "vue";

export const counter = reactive({
  value: 1,
  step: 1
});

const step = toRef(counter, "step");

watch(step, () => {
  console.debug("watcher A", { ...counter });
  counter.value += Number(counter.step);
});

watch(step, () => {
  console.debug("watcher B", { ...counter });
  counter.value += Number(counter.step);
});

如果 step 的值改变了：1 -> 2，那么你会看到的输出是
watcher A { value: 1, step: 2 }
watcher B { value: 3, step: 2 }

如果把这个实现换成 react 的话，由于 value 是从
const [{ value, step }, setCounter] = useState(counter);

里取出来的，所以不管有几个 useEffect，调用了几次 setCounter，在所有的 effect 函数里面，value 的值都会是 1。

这个例子本身很不好，实际中的情况是，多个 watchers 监听各自的 props/computed，但它们都会根据变化来和 data 本身的值来更新 data，于是就产生了不确定性。但是一时间不太容易构造一个合适的例子，临时只能想出这个示意一下，不知道解释明白了没……

【 在 beep (菜Ｍ.喵星耗子) 的大作中提到: 】
: 下面这一段，watcher的复杂性，和useEffect有何不同呢？useEffect如何解决“触发顺序”之类的问题呢？
--
修改:eGust FROM 101.98.83.*
FROM 101.98.83.*