你还是没理解我的意思,这么举例吧:有 props P,computed C,data D 三个状态,有两个分别监听 P 和 C。C 依赖于 P,当 P 变化的时候 C 也有可能产生变化。
// w1
watch(P, () => {
D = f1(P, D); // D: d1 -> d2
})
// w2
watch(C, () => {
D = await f2(D, ...);
})
在 w1 里面,D 的值发生了变化 d1 -> d2,而在 w2 触发时,由于 D 的值已经变化了,想取得原始值 d1 是非常困难的。而取得 d1 的值是完全合理的选择,因为在 C 的状态发生变化的时候,D 的值还是 d1。
换成等价的 react 操作
// e1
useEffect(() => {
setD(f1(D, P)) // D: d1 -> d2
}, [P])
// e2
useEffect(async () => {
setD(await f2(D, P))
}, [P, ...]) // 相当于 C = computed(P, ...)
在 e2 发生的时候,D 的值仍然是 d1,进行 setD(async (d2) => f2(d2, P)) 这种操作是非法的。而对于
d3 = await f2(D, P) // D === d1
setD((d2) => d3)
这种操作,是在用基于 D === d1 的状态求出来的结果 d3,去更新 D === d2 的状态,很可能并不是想要的结果,而是引入了一个 bug。那么解决的办法就是 reducer
D = reduce({ D: d2 }: State, { P, D: d3, oldD: d1 }: Action)
【 在 beep (菜M.喵星耗子) 的大作中提到: 】
: 明白你的意思了,你是说,前面例子中,如果用户需要从当前的外部counter取值,也应该能做到?vue也可以啊,watch(someRef, (v, oldV) => ... ) 这里就可以取到someRef的当前值。(顺便还附赠可以一起取到旧值。react hooks下useEffect里是取不到旧值的,官方也没有相关a
: watch(aRef, (v) => aRef.value = v+1)
: useEffect(() => setA(a+1))
: ...................
--
修改:eGust FROM 101.98.83.*
FROM 101.98.83.*