一个Vue3的watch执行顺序问题?

前俩天在看Vue3的代码的时候看到了eddect.ts中一段奇怪的代码,我寻思着这不是在脱裤子放屁吗?

export function triggerEffects(
  dep: Dep | ReactiveEffect[],
  debuggerEventExtraInfo?: DebuggerEventExtraInfo
) {
  // spread into array for stabilization
  const effects = isArray(dep) ? dep : [...dep]
  for (const effect of effects) {
    if (effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
  for (const effect of effects) {
    if (!effect.computed) {
      triggerEffect(effect, debuggerEventExtraInfo)
    }
  }
}

经过搜索发现在这么写是有原因的: https://github.com/vuejs/core...

这个issues展示的列子显示computed没有在正确的时机计算结果。

后续Vue官方修复了这个问题。

但是我还有一个问题: SFC链接

如果使用3.2.33(#5720修复前的版本)执行上述SFC,得到的结果是

computed count: 0
before inc plusOne: 1
watch count: 1
watch plusOne: 1
computed count: 1
after inc plusOne: 2

可以看到watch plusOne的值是错误的,当然这个问题已经解决了。

如果使用最新的版本,那么顺序是

computed count: 0
before inc plusOne: 1
computed count: 1
after inc plusOne: 2
watch count: 1
watch plusOne: 2

看起来结果正确了,但是watch的位置却在after inc plusOne之后了?

这是预测的行为吗? 个人觉得这引入了一个新的问题。。但是由于我的水平有限,无法理清内部原理,所以无法确定这是不是正常的。
这个可能和Vue的scheduler有关?

阅读 1.8k
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题