vue中props传递对象或数组时父子组件共享内存地址，导致直接修改引发状态污染；应通过深拷贝、computed+setter、watch+$emit或.sync/v-model等方式切断引用，避免深层修改。
Vue 中通过 props 传递对象或数组时，父子组件会共享同一份内存地址。这意味着子组件直接修改这个对象或数组，父组件的数据也会跟着变——这不是 Vue 的 bug，而是 JavaScript 引用类型的自然行为，但容易引发意料之外的状态污染。
为什么引用类型 props 会“意外同步”
JavaScript 中，对象和数组属于引用类型。当父组件把一个对象传给子组件的 props，实际传递的是该对象在内存中的地址。子组件内部对 this.$props.obj.name = 'new' 或 this.$props.list.push(item) 这类操作，直接作用于原始对象，父组件响应式数据立刻更新。这违反了 Vue “单向数据流”的设计初衷，也使调试变得困难。
正确做法：切断引用，创建本地副本
子组件不应直接修改 props，而应基于它生成独立的响应式数据。常用方式有：
-
data 初始化：适合一次性初始化使用，如
data() { return { localUser: { ...this.user } } }（浅拷贝）或JSON.parse(JSON.stringify(this.user))（深拷贝，仅限纯数据） -
computed + setter：适合需要双向映射但又想控制写入逻辑的场景，例如：
computed: { editableName: { get() { return this.user.name }, set(val) { this.$emit('update:user', { ...this.user, name: val }) } } } - watch 监听 + $emit 同步：监听 props 变化后主动构造新对象并通知父组件，避免子组件内直接赋值
推荐用 .sync 或 v-model 封装双向绑定
对于需要子组件反馈变更的场景（比如弹窗 visible、表单字段），不要手动改 props，而是用 Vue 提供的语法糖：
-
:visible.sync="dialogShow"等价于:visible="dialogShow" @update:visible="val => dialogShow = val" - 自定义组件支持 v-model，本质是监听 input 事件并 emit，内部需声明 model 选项或使用 prop + event 组合
- Pinia 或全局 store 更适合跨层级、多组件共享的复杂状态，避免 props 钻透和引用混乱
避免“伪共享”和深层修改陷阱
即使你复制了对象，也要注意嵌套结构是否真正隔离：
-
{ ...obj }只做浅拷贝，obj.children 仍指向原引用 - 使用
structuredClone()（现代浏览器）、lodash.cloneDeep()或递归函数处理深层对象 - 禁止在子组件中写
this.user.profile.avatar = url—— 应该 emit 全量更新，由父组件统一处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
