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 description in guide and API could be improved to be more precise. #3121

Open
alex-springer-sr opened this issue Dec 3, 2024 · 2 comments

Comments

@alex-springer-sr
Copy link

From the Guide basic usage

The value returned by defineModel() is a ref. It can be accessed and mutated like any other ref, except that it acts as a two-way binding between a parent value and a local one:

Its .value is synced with the value bound by the parent v-model;
When it is mutated by the child, it causes the parent bound value to be updated as well.

From the Guide under the hood:

defineModel is a convenience macro. The compiler expands it to the following:

A prop named modelValue, which the local ref's value is synced with;
An event named update:modelValue, which is emitted when the local ref's value is mutated.

While this is true for primitives it leads to IMO quite serious mistakes when people want to use objects or arrays as models.
I had this happen at a project i am working on where we now have quite a lot of places mutating props because developers assumed the update event is emitted when a property of the object or element of an array is updated.

I would suggest updating the text to state that the ref is a shallow ref.
In the under the hood part i would appreciate an explanation of what is actually being done under the hood ( i tried to figure it out, but could not understand the code).

I am happy to create a PR or help further flesh this out, but would appreciate some feedback first.

@alex-springer-sr
Copy link
Author

Also the following discussion can provide info on how to better document this:
https://github.com/orgs/vuejs/discussions/10538

@alex-springer-sr
Copy link
Author

Found the source code that actually creates the functionality behind defineModel macro :
https://github.com/vuejs/core/blob/main/packages/runtime-core/src/helpers/useModel.ts

I will create a PR for updating the docs once i get to it.

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