不能直接修改 props 传递的对象属性，因为 props 是只读响应式对象，直接修改如 props.user.name = '张三' 会隐式篡改父组件状态，导致调试困难、协作混乱、违背单向数据流原则；应通过 computed + emit、本地副本或惰性解析等显式通信方式安全更新。
不能直接修改 props 传递的对象属性，但可以安全地响应式使用或派生更新逻辑。核心原则是：不破坏单向数据流，不触发 ESLint 警告（vue/no-mutating-props），也不导致父组件状态被隐式篡改。
为什么不能直接改？
Props 是只读响应式对象，由 defineProps 返回。虽然 JavaScript 中对象是引用类型，子组件修改 props.user.name = '张三' 确实能同步影响父组件数据，但这属于隐式副作用——父组件完全不知情，调试困难、协作混乱、违背 Vue 设计哲学。
推荐的三种安全方案
1. 使用 computed + emit 实现双向绑定语义
适用于单字段编辑（如用户名、开关状态）：
- 用
computed的 getter 读取 props 值，setter 触发自定义事件通知父组件 - 在模板中可直接
v-model绑定该计算属性 - 父组件需监听对应事件（如
@update:name）并更新源数据
2. 创建本地响应式副本（推荐用于表单场景）
适合需要批量编辑、校验或暂存的复杂对象：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
立即学习“前端免费学习笔记（深入）”；
- 用
reactive({...props.obj})或structuredClone(props.obj)初始化本地数据 - 通过
watch监听 props 变化，同步更新本地副本（避免父组件重置时丢失用户输入） - 提交时通过
emit('submit', formData)将完整新对象传回
3. 惰性解析混合类型（字符串 or 对象）
当 props 可能是 JSON 字符串或已解析对象时：
- 用
toRefs解构 props，再对目标 prop 使用computed包装 - 在 computed 内部判断类型：
typeof props.data === 'string' ? JSON.parse(props.data) : props.data - 返回标准化后的对象，保持响应性且不污染原始 props
避坑提醒
不要这样做：
-
props.user.name = '李四'（直接赋值，ESLint 报错 + 运行时警告） -
const user = props.user; user.name = '王五'（仍是同一引用，等价于上条） - 在
default函数里做解析（仅对未传值生效，无法处理已传但格式错误的情况）
本质上，Vue 不阻止你“物理上”改对象属性，而是阻止你“逻辑上”绕过通信契约。安全的关键，在于把修改意图显式暴露给父组件。
