props
follows the one-way data flow strictly
#279
edison1105
started this conversation in
General
Replies: 3 comments 4 replies
-
This could be useful as a plugin but in practice, a lot of people use this (native js) behaviour so I don't think it should exist out of the box |
Beta Was this translation helpful? Give feedback.
2 replies
-
There are very valid cases for modifying an object passed as a prop. Consider a form component to edit a person: <template>
<form>
<label>
First name:
<input v-model="person.firstName" />
</label>
</form>
</template>
<script>
export default {
props: { person: Object }
}
</script> This component mutates its |
Beta Was this translation helpful? Give feedback.
0 replies
-
Why |
Beta Was this translation helpful? Give feedback.
2 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
props
follows the one-way data flow principle, i.e. it is not allowed to reassign values to props in subcomponents. However, ifprops
is passed as an object, it is still possible to modify the value of the object's properties in the child component. If we strictly follow the single data flow, we should not even modify object properties.Vue2
is limited bydefineProperty
which may not be good for this. ButVue3
is very easy to implement.It may be a
break change
, but it will avoid a lot of bugs.For example:
The
val
can be modified in the development environment, but in the production environment theval
will not be modified and there is no hint. difference behavier in development and production(Vue2 and Vue3 both have this problem)if
props
follows the one-way data flow strictly.we can show some warnings when developer try to modifyprops
in DEV mode.I think this will help developer avoid bugs.Beta Was this translation helpful? Give feedback.
All reactions