Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
kabalage opened this issue Sep 2, 2020 · 3 comments · Fixed by #786
Closed

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

kabalage opened this issue Sep 2, 2020 · 3 comments · Fixed by #786
Labels
bug Something isn't working

Comments

@kabalage
Copy link

kabalage commented Sep 2, 2020

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.

@antfu antfu changed the title watchEffect infinite loop with vue 2, fine with vue 3 async watchEffect infinite loop with vue 2, fine with vue 3 Sep 2, 2020
@antfu antfu added the bug Something isn't working label Sep 2, 2020
@tachigami
Copy link

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
Copy link
Contributor

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
Copy link
Contributor

chearon commented Aug 12, 2021

It's because of defineAccessControl:

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 😔

chearon added a commit to chearon/composition-api that referenced this issue Aug 13, 2021
chearon added a commit to chearon/composition-api that referenced this issue Aug 13, 2021
chearon added a commit to chearon/composition-api that referenced this issue Aug 13, 2021
antfu pushed a commit that referenced this issue Aug 14, 2021
antfu added a commit that referenced this issue Aug 14, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

Successfully merging a pull request may close this issue.

5 participants