Props 必须单向流动以保障数据流向可预测性，避免父子状态脱节；违规操作包括直接赋值、变异对象/数组及解构后修改；正确做法是用计算属性、本地副本、事件通知或 v-model 实现受控更新。
Vue.js 中的 Props 是父组件向子组件传递数据的主要方式，遵循单向数据流原则：数据只能由父组件流向子组件，子组件不能直接修改接收到的 Props。这是 Vue 响应式设计的核心约束，违反它会导致数据不一致、调试困难、甚至视图更新异常。
为什么 Props 必须单向？
单向数据流保障了数据流向的可预测性。Vue 的响应式系统依赖于明确的数据“源头”，一旦子组件随意修改 Props，父组件状态与子组件内部状态就可能脱节——比如父组件重新渲染时覆盖子组件的修改，或子组件修改后父组件无感知，造成 UI 与数据不一致。
Vue 在开发模式下会对直接修改 Props 的行为发出警告（Avoid mutating a prop directly），正是为了提前拦截这类错误。
哪些操作属于违规修改 Props？
- 在子组件中对 Props 变量执行赋值：
this.myProp = newValue - 对 Props 中的对象或数组直接调用变异方法：
this.objProp.name = 'new'或this.arrProp.push(item) - 解构 Props 后修改解构变量（若原 Props 是引用类型）：
const { list } = this.$props; list.push(...)
正确处理 Props 数据变更的实践方式
当子组件需要“基于 Props 衍生状态”或“触发父组件更新”，应采用以下符合单向流的设计：
-
使用计算属性派生只读状态：适用于展示逻辑，如
computed: { formattedTitle() { return this.title.toUpperCase(); } } -
用 data 或 setup 中的 ref 初始化本地副本：仅当需独立维护状态（如表单编辑），且不希望影响父组件时：
data() { return { localValue: this.initValue }; } -
通过事件通知父组件变更意图：子组件调用
this.$emit('update:value', newValue)，父组件用v-model或显式监听响应，实现受控更新 -
使用 v-model 的语法糖机制：对于支持双向绑定的组件，推荐使用
v-model:value（Vue 3）或自定义.sync（Vue 2），本质仍是事件驱动 + 父组件响应
特别注意：对象/数组 Props 的“浅响应”陷阱
Props 本身不可赋值，但其内部属性（如 objProp.name）仍可被修改——因为 Vue 对对象做的是响应式代理，而非冻结整个对象。这种修改虽不触发 Vue 警告，却破坏了单向流语义，且父组件无法追踪该变化。
解决办法：
– 父组件传入前用 Object.freeze() 或 structuredClone() 创建不可变副本（适合简单场景）；
– 子组件内部用 toRefs() + toRef() 拆解并保护，或始终通过事件同步变更；
– 更推荐方案：将“可变部分”提取为独立 Prop（如 editMode），配合事件控制权交还父组件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
