vue 子组件直接更改 props 有啥不良后果？

解答思路

Props 的数据类型决定了直接修改的实际后果不同：基本类型（字符串、数字、布尔等）修改后仅影响子组件本地的这份拷贝，父组件的数据不会变，因此“修改也没用”；引用类型（对象、数组）由于共享同一份内存引用，修改会直接影响到父组件的数据，看似“有效”，但会破坏组件间的单向数据流，导致数据流向变得不清晰、难以追踪。

详细说明

• 基本类型 props：子组件接收到的是值的拷贝，在子组件内部修改这个变量，仅仅是修改了子组件本地的一份副本，父组件持有的原始值不受影响。这种修改虽然不会报错，但也没有意义——因为它无法真正同步回父组件，容易让人误以为「改了但没生效」。
• 引用类型 props（对象/数组）：子组件拿到的是与父组件相同的内存引用。如果子组件直接修改对象的属性或数组的内容（而不是重新赋值整个 props），这个修改会直接反映到父组件持有的同一份数据上，因为二者本质上指向同一块内存。
• 为什么这是「不良后果」：Vue 提倡的是「props 向下传递，事件向上通知」的单向数据流。如果子组件可以随意修改父组件传下来的引用类型数据，那么数据的变化就可能来自任意一个持有该引用的组件，无法确定「这份数据到底是谁改的、什么时候改的」，调试和维护成本会大幅增加。正确做法应该是：子组件需要修改数据时，通过 $emit 触发事件通知父组件，由父组件来完成真正的状态更新。

小结

子组件直接修改 props：基本类型的修改「不生效但无害」，引用类型的修改「生效但破坏单向数据流」；无论哪种情况，都应改为通过事件通知父组件来更新数据，以保持数据流向清晰可控。