Subscribe on changes!

watchEffect doesn't work when perform async

avatar
Sep 24th 2020

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
avatar
Sep 24th 2020

This is expected to be able to collect dependencies and there it will be documented in docs