V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
freezebreze
V2EX  ›  前端开发

watchEffect 的疑问

  •  
  •   freezebreze · 309 天前 · 728 次点击
    这是一个创建于 309 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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
        1
    Charrlles  
       308 天前 via iPhone   ❤️ 1
    每次触发 watchEffect 的时候都会重新收集依赖,然后会和上一次跟踪的依赖比较,如果一个依赖之前跟踪过,但这次没有,就会被清掉。你这个例子就是因为短路,依赖被清除了。用 watch 就可以了
    Man957
        2
    Man957  
       306 天前
    @Charrlles 能详细讲解下,比如:第一次收集了那些依赖,第二次收集的那些依赖?
    Charrlles
        3
    Charrlles  
       305 天前 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 方法,所以之后也就不会触发了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1917 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 16:28 · PVG 00:28 · LAX 08:28 · JFK 11:28
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.