Two-way binding can directly modify without emit 'update:model-value' event when using object to create ref() or reactive()
ningwang723 opened this issue · comments
Vue version
3.4.23
Link to minimal reproduction
Steps to reproduce
I show the code in playground.
when i create ref/reactive with Object and pass it to child component with v-model, it can directly modify without emit any event and it not trigger computed setter or watcher.
What is expected?
update value after emit 'update:model-value' event.
What is actually happening?
update value without emit 'update:model-value' event.
System Info
No response
Any additional comments?
No response
It seems that we can mutate a prop in the template, even though the Vue.js docs state there should be a warning if we try to mutate props in a child component. Interestingly, there doesn't appear to be a warning when a prop is mutated directly in the template.
Since the modelValue is also a prop, I believe this issue is closely related. I plan to open a pull request to add a warning when a prop is mutated in a template.
I've attached a link with a reproduction of the bug related to props. It seems the link to the documentation about readonly props may be lost during compilation.
I'm looking forward to your feedback and suggestions on this issue.
The current behavior allows mutating a prop directly in the template, which could be considered a breaking change if we were to disallow it. Given that this is an existing functionality, we should carefully consider the implications before making any changes.
I'm looking forward to the team's suggestions on the best approach to handle this. We'll need to weigh the pros and cons of maintaining the current behavior versus introducing a warning or error when props are mutated in the template.
I'm updated the code to add an input element to handle the prop "modelValue" in v-model, the prop should be readonly, but it can mutate even it in none setter computed!
Reative object's properties are always mutable in Vue, and always have been. When the docs speak of "props are readonly", it means you can't assign to a prop and have that change propagate to the parent:
const props = defineProps({
title: String,
user: Object,
})
// this doesn't do anything, and this is what we mean when we say "props are readonly":
props.title = 'New Title'
// this doesn't mutate the prop `user`, it mutates a property `name` in the object provided through the prop.
// This always was mutable in Vue and is *not* a bug.
props.user.name = 'Tom'You can create explicitly readonly reactive data though if you need to: