watchEffect did not perform as expected.
Vue version
3.4.21
Link to minimal reproduction
Steps to reproduce
const a = ref(0)
const b = ref(0)
const c = ref(0)
watchEffect(() => {
c ++
if(a.value || b.value) {}
})
Modify the values of a
and b
separately.
What is expected?
Increment c
whenever a
or b
is modified.
What is actually happening?
- If
a
is0
, modifyingb
will triggerc++
. - If
a
is not0
, modifyingb
will not triggerc++
.
System Info
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/122.0.0.0 Safari/537.36
Any additional comments?
No response
While I understand that this can be confusing, it's technically working as expected. When the first condition evaluates to false
, the code in the second condition won't be run by Javascript, so Vue can't collect b
as a dependency of the effect.
Another way to accommodate for this would be to read both values before the condition, i.e.: