in watchPostEffect use setTimeout update reactive not effective
Vue version
3.2.37
Link to minimal reproduction
Steps to reproduce
in watchPostEffect, new update data.num = 10, the use setTimeout update data.num++
What is expected?
rendering of the page
What is actually happening?
no rendering of the page
System Info
windows
Any additional comments?
i think watchPostEffect listen in data update, is shold be rendering page. new not rendering page , vue2.x watch is ok!
as you can see in console watchPostEffect always set data.num = 10
so it is work as expected
This is as expected.
When the setTimeout callback changes data.num, the order of rendering is as follows.
- Component render function
- WatchPostEffect callback
- Component render function
Because the watchPostEffect callback runs with data.num changed to 10, the component always ends up display 10.
Your watchPostEffect has data.num as a dependency because of your console.log, so it re-runs after each re-render, re-setting data.num to 10 over and over. This is expected behavior resulting from a badly set up watch effect.
if your remove the console.log, it will show 10, and then 11, and then stop.
as you can see in console watchPostEffect always set data.num = 10
so it is work as expected
thanks