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

defineModel is triggering update event, even if its value didn't actually change #11125

Closed
alann-sapone opened this issue Jun 13, 2024 · 4 comments · Fixed by #11162
Closed

Comments

@alann-sapone
Copy link

alann-sapone commented Jun 13, 2024

Vue version

3.4.27

Link to minimal reproduction

Minimal reproduction link

Steps to reproduce

Here, when I click on the button Apply value to model, I can see that the counter increases, even if the value is exactly the same.

What is expected?

I expected the same behavior as the one we had when the feature was still experimental : Only triggering an update when the value is actually different, not only when its assigned with any value

What is actually happening?

Setting a value always triggers the update:modelValue event, even if it didn't actually changed, which leads to useless reactivy, and even worse, duplicated API calls, etc...

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)
    CPU: (24) x64 AMD Ryzen 9 3900X 12-Core Processor
    Memory: 11.37 GB / 15.57 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 20.14.0 - /usr/bin/node
    npm: 10.7.0 - /usr/bin/npm
    pnpm: 9.0.6 - /usr/bin/pnpm
  npmPackages:
    vue: ^3.4.27 => 3.4.27

Any additional comments?

We actually updated our Vue version and removed all occurences of { local: true } because we had to fix some Vue bugs which were corrected in more mature versions.

Quick note: I'm aware that I could replace all occurrences of @update:something with a watch like
in this exemple. But the pain point is when your app is already having a lot of @update:something :).

@jh-leong
Copy link
Member

Workaround: use https://vueuse.org/core/useVModel/#usevmodel (see the shouldEmit option)

@alann-sapone
Copy link
Author

Actually, we migrated from useVModel to defineModel. But this is the same issue as the one I mentionned before : In our app, it means a huge refacto of our code. As I am not sure that this is the desired behaviour of defineModel, I think it's safer to open a ticket to challenge this implementation which changed from when it still was an experimental feature.

@alann-sapone
Copy link
Author

@yangxiuxiu1115 : Hey there !
Thank you for your pull request opening :). Just wondering : Did you fix it because it wasn't the desired behavior ?

@yangxiuxiu1115
Copy link
Contributor

Yes, a lot of these optimizations exist within vue, and I think maybe DefineModel shouldn't be special

@github-actions github-actions bot locked and limited conversation to collaborators Aug 1, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
3 participants