-
Notifications
You must be signed in to change notification settings - Fork 4.6k
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
3.4 updates #2625
3.4 updates #2625
Conversation
✅ Deploy Preview for vuejs ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
@@ -52,15 +52,15 @@ Takes a getter function and returns a readonly reactive [ref](#ref) object for t | |||
```ts | |||
// read-only | |||
function computed<T>( | |||
getter: () => T, | |||
getter: (oldValue: T | undefined) => T, |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Is it correct that this is : T | undefined
instead of ?: T
, if I remember correctly there might be a TS compiler options so that | undefined
means that it needs to explicitly pass a variable that can be undefined, instead of not passing a variable at all.
However, because this is a callback, it is not affected by this compile option.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This function is not passed by the user but provided by the framework, so the argument will always be present.
model.value = 'hello' | ||
|
||
// declares "count" prop, consumed by parent via v-model:count | ||
const count = defineModel('count') |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
some random thoughts
Is it possible to declare multiple models like that?
// v-model:count
const count = defineModel('count')
// v-model:x
const x = defineModel('x')
Or will this result in an error?
What happens if someone accidentally redeclared two times the same?
const count = defineModel('count')
const count2 = defineModel('count')
Should this be handled by a linter? Will there be a Vue runtime error?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
First case is supported. Second case will throw a compile-time error.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could we add docs that different defineModel
s are supported and can be used that way? I think it is really common to have multiple v-model:*
but it works differently as to defineProps
or defineEmits
where you pass multiple values at once, but for defineModel
you suddenly need multiple calls.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It is already shown in the component v-model guide.
Like `defineProps` and `defineEmits`, `defineModel` can also receive type arguments to specify the types of the model value and the modifiers: | ||
|
||
```ts | ||
const modelValue = defineModel<string>() |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Why is it that way? It feels like it behaves the opposite of ref
🤔
Here is an example:
first line: when I leave out the types at ref
, it results in Ref<undefined>
(legit to me 👍)
second line: when I explicitly use <boolean>
, undefined
is not a valid value (also legit to me 👍)
so I would assume that defineModel<string>()
results in string
and defineModel<string | undefined>()
results in string | undefined
and I don't need a required
at all (or suddenly mix generics-TS and options object, where as e.g. defineProps
explicitly forbids this mixing)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Because it accepts parent value via a prop, so it behaves like a prop (can be undefined
unless explicitly required)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ah I see 🤔
should this be also documented, maybe with a :::tip
? or might I have just oversee that?
Includes: