Suggest an editImprove this articleRefine the answer for “Why must props be immutable?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Props in Vue** must be immutable because they represent data controlled by the parent component, not the child. **Key point:** if a child component needs to change a value, it should create local state or notify the parent of the change through `emit`.Shown above the full answer for quick recall.Answer (EN)ImageProps in Vue **must be immutable**, because they represent data that is **controlled by the parent component**, not the child. If a child component could change props directly, it would break the application's logic, make data unpredictable, and lead to bugs. Let's break this down as clearly as possible. --- ## 1. One-way data flow Vue uses the model: ```javascript Parent → Child ``` That is: - the parent *passes* data (props), - the child *uses* this data, but *does not change* it. If a child component could change props, confusion would arise: - who controls the data? - the parent or the child? A one-way flow makes the system **predictable and stable**. --- ## 2. If you change props, the parent will not know about it Example: Parent: ```javascript <UserCard :name="userName" /> ``` Child: ```javascript props.name = 'New name' // bad ``` The parent's state `userName` **will not change**, even though the child changed `name`. As a result: - the parent has one value, - the child has another, - the dependency graph breaks. --- ## 3. This breaks reactivity Vue tracks reactions based on the *props → template* dependency. If a component changed props: - Vue would not be able to correctly track what changed, - this would create chaos in updating the component tree. --- ## 4. Component composition would become unpredictable Imagine there is a chain: ```javascript App → UserList → UserCard ``` If `UserCard` suddenly starts changing its props: - `UserList` will not know about the changes, - neither will `App`, - UI updates will become uncontrollable. Components will stop being **pure, predictable, and isolated**. --- ## 5. Props are like function arguments If a function receives an argument: ```javascript function greet(name) { name = 'John' // bad } ``` this is also considered bad practice - arguments should be immutable. Components are the same as functions, just visual. --- ## 6. Vue protects props with a warning If you try to change a prop: ```javascript props.count++ ``` Vue will issue an error: ```javascript [Vue warn]: Attempting to mutate prop "count". ``` This is protection against incorrect use. --- ## How do you correctly change values that came through props? ### Way 1. Use local state If the value needs to be changed inside the component: ```javascript <script setup> const props = defineProps(['initialValue']) const value = ref(props.initialValue) </script> ``` --- ### Way 2. Notify the parent through emit ```javascript <script setup> const props = defineProps(['modelValue']) const emit = defineEmits(['update:modelValue']) function increment() { emit('update:modelValue', props.modelValue + 1) } </script> ``` The parent updates the state → the new value comes back through props. This is **one-way data flow plus two-way interaction through events**. --- ## Summary (cheat sheet) **Why props are immutable:** - They ensure one-way data flow - The parent remains the single source of truth - Reactivity works correctly - Components remain predictable - Confusion between parent and child state is avoided - Vue warns about their mutation If you need to change data, create a local copy or use `emit` to ask the parent to change the state.For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.