Props只读本质是设计契约而非语法限制，子组件须通过emit事件申请修改，父组件决定是否更新并下发新值，确保单向数据流、状态源头唯一、变更可追溯。
Vue 中的 Props 只读原则，本质不是语法锁死，而是设计契约：子组件拿到的 props 是父组件状态的“快照”，只能读、不能写；任何修改意图都必须通过事件“申请”，由父组件决定是否批准并下发新值。这保证了数据流向清晰、变更可追溯、多组件协作不冲突。
为什么 props 被设为只读
单向数据流的核心目标是让状态源头唯一、变化路径可控。如果子组件能直接改 props：
- 父组件重渲染时会覆盖子组件私自修改的值，导致 UI 突然“回退”
- 多个子组件共用同一对象 props 时，一个改了内部属性（如 props.user.name = 'Alice'），其他组件无法感知，视图与数据脱节
- 调试时难以定位状态在哪被修改，尤其在大型项目中容易引发隐性 bug
哪些操作属于违规修改
只要改变了父组件所控数据的真实状态，就破坏了单向流。常见错误包括：
- 直接赋值：this.count = this.count + 1（count 是 props）
- 变异对象属性：this.config.theme = 'dark'（config 是传入的对象）
- 调用数组方法：this.items.push(newItem)（items 是传入的数组）
- 解构后修改：const { list } = this.$props; list.pop()（list 是引用类型）
正确处理方式：三步闭环
子组件需要响应式使用或反馈变更，应走“读取 → 派生/复制 → 通知”的标准流程：
立即学习“前端免费学习笔记（深入）”；
- 读取：用 defineProps 接收，仅用于展示或计算派生（如 computed: { fullName() { return this.firstName + ' ' + this.lastName; } }）
- 派生/复制：若需本地编辑，显式创建副本——基础类型直接赋值给 ref，对象/数组用 structuredClone 或展开运算符（const localUser = { ...props.user }）
- 通知：通过 emit('update:xxx', newValue) 触发事件，父组件监听后更新自身状态，再重新传递，形成完整闭环
特别注意对象和数组的“静默修改”陷阱
Vue 对 props 做的是浅层只读代理，不冻结深层属性。所以 props.obj.name = 'Tom' 不报错，但确实改了父组件的数据——这不是 Vue 失效，而是 JavaScript 引用特性的结果。这种修改绕过了响应式追踪，父组件完全不知情，属于高危隐式副作用。安全做法是：父组件传参前用 Object.freeze 或 structuredClone 预处理，或子组件始终操作副本。
