watchEffect 的疑问

[freezebreze]

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

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

[Charrlles]

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

[Man957]

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

[Charrlles]

@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 方法，所以之后也就不会触发了