async watchEffect infinite loop with vue 2, fine with vue 3

[kabalage]

Vue 3 example

Vue 2 example with composition-api

Uncommenting data.loading = false; causes infinite loop. I would expect data.loading to not be added to the tracked dependencies of the watch effect function.

[tachigami]

This also leads to an infinite loop.

  setup() {
    const state = reactive({
      data: null,
      watchVar: 123,
    });

    const runFunction = (av) => {
        console.log('var', av);
        state.data = []; // <-- this line of code
    }

    watchEffect(() => {
      console.log('watchEffect');
      runFunction(state.watchVar);
    })
  },

[subdavis]

Could this be elevated in priority? There are clear reproduction steps. Thanks!

I've taken to doing this a lot, but it's certainly not ideal:

// TODO convert to watchEffect
const func = () => {
  // change state
}
watch(value, func);
func();

[chearon]

It's because of defineAccessControl:

composition-api/src/reactivity/reactive.ts

Line 97 in 1b63186

const value = getter ? getter.call(target) : val

That right there is a Vue getter being called for a mutation of the same property, which establishes a dependency on a.x if you do a.x = 1. That means, with this bug, watchEffect is basically unusable.

Looks like anything set on a reactive() object will have this problem, but maybe Vue.observable() would be okay if you want a work-around, and don't need the unwrapping. I didn't test that yet, but those are my findings after struggling with this for half a day 😔