effect fired multiple times and wrong output
Vue version
3.2.47
Link to minimal reproduction
Steps to reproduce
click the button and watch console output, the given output was not expected
What is expected?
the effect function should be fired no more than 2 times
What is actually happening?
but fired three times actually
about:srcdoc:160 fired 1 [1] 1
about:srcdoc:160 after (2) [1, 1]
about:srcdoc:160 fired 1 (3) [1, 1, 42] 2
about:srcdoc:160 after (4) [1, 1, 42, 1]
about:srcdoc:160 fired 1 (3) [1, 1, 42] 3
about:srcdoc:160 after (4) [1, 1, 42, 1]
the 2nd and 3rd times is no way to understand.
does vue do some deep duplicate to re-add element to array?
i changed b from array to number,it only fire 2 times.
System Info
No response
Any additional comments?
No response
@vue/reactivity low-level effect() is synchronous unless you provide a scheduler.
You want to be using watchEffect from the vue package
The [...b] and b.push() inside the effect will be registering different dependencies on b. Both of these are being triggered by the external b.push(), so they each trigger the effect. The scheduler handles the deduplication when using watchEffect, but if you use effect directly you will get the same effect being triggered twice by that single push().