为什么不能直接修改 props?编辑表单怎么做?

先理解原理和示例,再练习完整口述与追问。

props 表达父到子的输入,直接修改会破坏数据归属并可能被父更新覆盖。简单字段通过事件请求更新;编辑草稿用本地副本,并明确初始化、取消、提交和外部更新时的行为。

props 属于父组件的数据流。子直接改一个基础类型 prop,可能在父重新渲染时被覆盖并产生警告;直接改 prop 对象的嵌套属性虽然可能改变父数据,却破坏了可追踪的单向数据流。编辑表单通常需要“已保存值”和“待提交草稿”两份不同状态,取消时才能无副作用地丢弃草稿。

弹窗收到 record 后,在打开或 record.id 变化时建立 draft;保存发出 submit 事件,父组件请求成功后更新 record。需要双向同步的简单输入用明确 update 事件;复杂业务草稿则不要每敲一个字就改父级记录。请求回填还应关联当前打开的记录,防止上一条详情后返回覆盖新草稿。

展开运算符只做浅拷贝,嵌套数组和对象仍可共享。无条件 deep watch 整个 prop 并重建草稿,可能把用户正在输入的内容覆盖掉。

props 是父组件拥有的数据,子组件应把它当作只读输入。直接修改可能被父更新覆盖,也让状态来源不清。简单输入我发更新事件让父组件修改;复杂编辑表单我在打开时创建本地草稿,取消丢弃,提交校验后把结果通知父级。还要明确编辑中父数据变化是刷新草稿、提示冲突还是保持当前编辑。

面试官可能继续问追问与完整解答展开收起

对象 prop 的嵌套字段能改就代表应该改吗?为什么浅拷贝表单仍会影响原数据?

对象 prop 的嵌套字段在技术上可能改得动,因为父子引用同一对象,但这仍是跨边界修改父状态。展开运算符只复制一层,嵌套引用仍共享。应按表单结构复制嵌套字段,或在明确支持的数据范围内用合适的深拷贝。