watchEffect doesn't work when perform async
Version
3.0.0
Reproduction link
Steps to reproduce
// just code in your component:
<script>
import { reactive, watchEffect } from "vue";
function watchEffectTest(reactive, watchEffect) {
const obj = reactive({ age: 1 });
watchEffect(async () => {
await new Promise((resolve) => {
setTimeout(resolve, 100);
});
console.log(obj.age);
});
const timmer = setInterval(() => {
obj.age++;
if (obj.age > 5) {
clearInterval(timmer);
console.log("stop", obj.age);
}
}, 1000);
}
export default {
setup() {
watchEffectTest(reactive, watchEffect);
return {};
},
};
</script>
What is expected?
it should log in the console :
1
2
3
4
5
stop 6
What is actually happening?
but only log :
1
stop 6