Subscribe on changes!

watchEffect can't collect dependencies in setTimeout function

avatar
Apr 21st 2023

Vue version

3.2.47

Link to minimal reproduction

https://play.vuejs.org/#eNpdj8FugzAMhl/FygUqELAeq4C2w96gx1xYagZaSCJwuk0o7z7TsqrtIbES//9n/4t48744BxQHIWc9DZ5gRgq+URaG0buJYIEJuxy+W9L9Vt67DjVBhG5yIyTsT5RVVjs7E2gXLOEE9epLq52yd5403UHdwMJ4FtrZGSyM+0yTYz/M/HNC4Io/qAPhCZw1v3xpTBgD62rHYUQXHjhPpLtpSf6/TXFuTcALJOawr6p1r8hHltfYHJgfhKM3LeEaH2S/bzb7AZblFixGWXLrIvkIRM7CqzaD/qqV2DRZpkSTvcjy2metLG9sEf8AhsmAKA==

Steps to reproduce

click the button +1

In setTimeout function is accessed counter.vaule, but watchEffect can't collect a dependency on counter.value, the result is that the callback function passed into watchEffect is not executed when counter.value is changed

image

What is expected?

The watchEffect callback function calls back when counter.value is changed

What is actually happening?

This callback functionis executed only once

System Info

No response

Any additional comments?

No response

avatar
Apr 21st 2023

This is expected and documented.

Bildschirmfoto 2023-04-21 um 12 33 29

While you don't use await, setTimeout callbacks are still asynchronous.