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

Lack of information about order of calling watcher vs callback in Vue 2 vs. Vue 3 #60

Open
aghArdeshir opened this issue Oct 19, 2023 · 0 comments

Comments

@aghArdeshir
Copy link

Hi. There is a breaking change for Vue 2 -> Vue 3 that had me for almost 1 full day to find the root cause. And it is not mentioned in the migration guide.

This example:

<template>
  <input
    autofocus
    type="number"
    v-model="count"
    @input="countChangedCallback"
  />
</template>

<script>
export default {
  data: function () {
    return {
      count: 0,
    };
  },

  watch: {
    count() {
      console.log('watch called');
    },
  },

  methods: {
    countChangedCallback() {
      console.log('callback called');
    },
  },
};
</script>

Running the app and changing the input you can see the order in which the console.logs are called are different. This is what happens in Vue 2 app:

callback called
watch called

and this is what happens in Vue 3 app:

watch called
callback called

I think it is important to note about it, because it can have an effect on applications too (rather that only interfering with libraries). And with more complicated use cases (read "legacy code") this can lead to long hours of debugging. (took me 1 day or so to find about it, because it led to a bug in our application)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant