先记住这个答案
props 把父层状态传给子组件，父层更新会形成新的输入；子组件不应直接给顶层 prop 赋值，而应通过事件或明确动作请求数据所有者更新。Vue 对顶层 prop 的直接修改会提供只读约束与开发诊断，但对象内部仍可能因共享引用而可被修改，这不代表数据归属转移。需要编辑时可以建立本地草稿，并定义何时初始化、提交和同步；只需格式化展示时通常直接派生，不必复制成第二份状态。
- 顶层 prop 由父层提供，变更决定应遵守组件契约
- 嵌套引用可修改不等于推荐绕过父层更新流程
- 本地草稿和展示派生值是不同需求，同步策略不能省略
为什么不让子组件直接改顶层 prop
如果父层和子层都把同一字段当作自己可以任意覆盖的状态，更新来源就难以追踪，父层重新渲染还可能覆盖子层临时修改。单向输入使父层保有决定权，子层用事件表达变更请求，调用者可以接受、校验或拒绝这次请求。
下面计数按钮只读取 value，点击时发送期望的新值。父层接收 update:value 后更新自己的状态，再将结果传回来。如果父层没有监听，按钮不会自动把输入改成新值，这恰好体现了组件接口中的职责分工。
import { defineComponent, h } from 'vue';
const CounterButton = defineComponent({
props: { value: { type: Number, required: true } },
emits: ['update:value'],
setup(props, { emit }) {
return () => h('button', {
onClick: () => emit('update:value', props.value + 1)
}, String(props.value));
}
});父层可用 onUpdate:value 回调接收数值并更新自身状态。只挂载组件而不处理该事件，点击后仍显示原始 value；接受事件并重新传入后才展示新值。
嵌套对象修改为何是另一种风险
父层传入对象时，子层与父层可能引用同一内部数据。修改 props.profile.name 并不等于给 props.profile 重新赋值，因此不能用顶层只读来推断所有嵌套写入都被阻止。它可能直接改变父层拥有的数据，让变更绕过清楚的事件与校验路径。
高度耦合的组件可以明确约定共同编辑对象，但必须认识到这种接口的共享效果。一般可复用组件更适合发送补丁或新值交给父层处理。简单浅复制只分离外层，嵌套字段仍可能共享，编辑草稿是否需要更深隔离要按数据结构判断。
派生展示与可编辑副本如何选择
输入只需要转换成标签、排序结果或格式化数值时，可以用 computed 等方式根据当前 prop 派生，避免复制后再维护同步监听。若表单需要用户修改但暂不提交，则本地草稿有明确用途，此时应保存草稿与源记录的对应关系。
父层在用户编辑中途传来新数据时，要决定重置、合并还是提示冲突，不能无条件 watch 后覆盖草稿。提交成功、取消编辑和切换记录也应有明确规则。状态流清楚之后，再选择 v-model、事件或动作函数表达协议，语法简写不会替你解决数据归属。
容易答错的地方
- props 只读意味着对象内部绝对不可变
- 顶层约束不等同于深冻结，嵌套共享引用可能被修改，仍需遵守所有权约定。排查“Vue props 单向数据流与嵌套对象修改”时还要核对输入、版本和执行顺序，并用反例确认修复后的边界。
- 把 prop 放进 ref 就自动持续同步
- 初始化复制通常只取当前值，后续同步和编辑冲突需要明确处理，不能依赖 ref 自动跟随来源。
面试官还会怎么问？
v-model 是否破坏单向数据流？
组件 v-model 通常以输入与更新事件表达协议，父层仍负责状态更新；它是常见接口写法，不代表子层获得任意修改权。
只想改变显示格式，需要本地 ref 吗？
通常直接派生更简单，避免多一份需要同步的状态；只有允许与输入暂时不同的编辑需求才需要草稿。
父层拒绝一次更新请求会怎样？
父层不改变传入值，子组件应继续反映已有输入，并按业务需求显示原因，不能自行假定请求已被接受。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。