watchEffect 的疑问

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 317 天前的主题，其中的信息可能已经有所发展或是发生改变。

watchEffect(()=>{
  if(temp.value >= 60 || height.value >= 80){
    console.log('联系服务器')
  }
})
let temp = ref(10)
let height = ref(0)

当 temp.value = 60 去改变 height 没有运行回调，是因为什么？我猜测是 true || expr 短路了后面的没求值的问题有没有大佬说下更具体的~

3 条回复 • 2024-01-14 15:20:09 +08:00

Charrlles

316 天前 via iPhone

每次触发 watchEffect 的时候都会重新收集依赖，然后会和上一次跟踪的依赖比较，如果一个依赖之前跟踪过，但这次没有，就会被清掉。你这个例子就是因为短路，依赖被清除了。用 watch 就可以了

Man957

313 天前

@Charrlles 能详细讲解下，比如：第一次收集了那些依赖，第二次收集的那些依赖？

Charrlles

312 天前 via iPhone

@Man957 简单来说，temp 和 height 是两个 proxy 对象，首次渲染的时候，会执行一次 watchEffect 的回调，在他们的 get 方法里会调用 track ，将当前的 effect ，也就是 watchEffect ，记录到相应的 dep 里（ dep 就是一个记录 effect 的 Map 对象，也就是所谓的依赖），同时，也会把这些 dep 推到 effect.deps 数组里。当 temp.value 变化的时候，触发 set 方法，触发之前记录在 dep 里的 effect ，最终触发 effect.run()，也就是 watchEffect 里的回调，执行回调的时候，就会再次触发 get 方法，effect.deps 也会更新，更新时会比较新的 dep 和旧的 dep 。假设这次 temp.value 已经足够大了，由于 if 里的短路，不会触发 height 的 get 方法，比较 dep 的时候就会给 height 的旧 dep 执行 cleanup 方法，所以之后也就不会触发了