watchEffect 没触发

[KaixinTree]

Vue version

3.4.21

Link to minimal reproduction

https://play.vuejs.org/#eNqNVFtPE1EQ/isn+9ISml4gIQTbxktI1Ac1SuLLvizb03Zhu7vZPVswpUnlZkEqEBQTICYk3DRgSjSkyMX/onu29Ym/4OyebbslBW0fejrzzTcz35kzBe6epoXzJuaGuDjBOU0WCE7yCkLxlJRHoiwYRoLnCDYIz7l28GT7kn+2Svbx9NX5Br1Ys6vf7drnxuUlLVcHor9mZ67Ol+zyOpitiwozD0bFnP3x5HdpurG/R5dX7cXdxtFePAJMbU6gogsVxgbMhQJyCkLFIlDeBIUMDJrFUiZLACzmPKyHHjUJURV0V5QlcRxaEbOCksEjwAwNsWS9sWg8wnDNHN2jHrpJWBxkvh4Xj4BmcIpHfEo637gh6pJGkAwkiQAxAsjAxNSQIuRwIjAC4r4kgpgdTqexSAIul5TTVJ2gAtJxOoQmBCJmvR+GQkWU1tUcCsDdBVizMiZMsYQTFIxFe+40zZ46zOHaHU/aVEQiQZttTYI9qMAkcJjCeUE2MepNoFjUsRa7xjFV2pEs2Q2xkUhHF/b6KT1fbvzcbGwv0Z0Nq/aFHn+yS/v1zVW6ctgsX4LKXRJfaLBVRTszkIuqYqgyDstqJggX1frwXAhJvb2hdlshf509jOAf0R4K0khpFPQplEyggai/jOtUbOxh5unqYozn2kQgi4+yQzogHfxv0r5rpK3zqJmBF4KsWol+3WjsvaZbByC6/e2DdbGG6HzFPtxuVGfq7w+s2tuOq4NXjABv1Sr12ZP60YJvIpKJgShdeecg6tOn9M2ZfxBo9RhigJmVZ/2Yb9UCW6FRmrOXFupz+9bZrlVbZKUgRMvzVm0Hrh9UoOUde/2IBXXTGU1Ndc5Yp1BdxsAvlHOVviHoYPIUvE3nznAvwL3EIvxx3j57662XT17J2Hv4hmg4T19UNZxKAtBxJbkQR8CkpKVMeMxQFVjEbiOwc9ScJslYf6o5Y27w3FCzRZ4TZFmdeOzaiA5tNO1iFovjXexjxqRj47lnOjawnsfQR9NHBD2DYas57uEXT/AknFvOnJoyZUDf4nyOQSvTqZHB7ptKCsr24dxqH7kbTVIyI8bwJMGK0WzKKdQV0MXzHGy0B7e03i63P9zvbZYiV/wLJOWgKw==

Steps to reproduce

`

需求：当水温达到60℃，或水位达到80cm时。触发报警

当前水温：{{ temp }}℃

当前水位：{{ height }}cm

<button @click="changeTemp">水温+10</button>
<button @click="changeHeight">水位+10</button>

<script lang='ts' setup name='TestWtachEffect'> import { ref, watchEffect } from 'vue' let temp = ref(10); let height = ref(0); function changeTemp() { temp.value += 10 } function changeHeight() { height.value += 10 } // watchEffect 方式进行多个属性监听 let i = 0 watchEffect(() =>{ console.log(">>>>>>>>>>", i++) //用来日志打印做标识 // 问题：等 temp.value>=60后， 点击changeHeight就不再触发了 if (temp.value >= 60 || temp.value >= 80) { console.log("触发警告") } }) </script> <style lang='scss' scoped></style>`

点击【水温+10】5次后（temp.value >= 60），再点击【水位+10】，watchEffect方法内不触发

What is expected?

点击任意的按钮，都能触发watchEffect()

What is actually happening?

temp.value >= 60 为true后，点击changeHeight() 改变height.value 没触发watchEffect()

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (8) x64 Intel(R) Core(TM) i7-4790 CPU @ 3.60GHz
    Memory: 4.18 GB / 15.86 GB
  Binaries:
    Node: 20.13.1 - D:\Program Files\nvm\nodejs\node.EXE
    npm: 10.5.2 - D:\Program Files\nvm\nodejs\npm.CMD
  Browsers:
    Chrome: 69.0.3497.100
    Edge: Spartan (44.19041.1266.0), Chromium (120.0.2210.144)
    Internet Explorer: 11.0.19041.1566

Any additional comments?

No response

[LinusBorg]

• As soon as temp.value >= 80 evaluates to true, the Javascript runtime will no longer evaluate the second condition (height.value >= 80)
• Consequently, height.value isn't being accessed anymore,
• and consequently, it no longer is a reactive dependency of the effect.

This is indeed a small footgun in watchEffect() due to how conditions are evaluated (or skipped) in JS.

another possible solution/workaround:

  watchEffect(function () {
    console.log(">>>>>>>>>>", i++)
    // read all reactive depenencies outside of condition:
   const t = temp.value
   const h = height.value
    if (t >= 60 || h >= 80) {
      console.log("触发警告", temp.value)
    }

I'll close this since it's not something we can solve in the implementation.

[KaixinTree]

I see. Thank you for your time.thank you!