树形菜单节点勾选状态“串流”本质是多树共享节点引用导致的状态污染，需通过深拷贝（如json.parse(json.stringify())或递归克隆）彻底隔离数据，并确保key唯一及setcheckedkeys调用时机正确。
树形菜单节点勾选状态“串流”，比如勾选 A 菜单后，B 菜单对应节点也自动被选中，本质不是 UI 渲染错乱，而是多个树组件（或同一树的多处逻辑）共享了同一份节点数据引用——浅拷贝没切断对象层级间的内存指向，导致状态变更穿透到其他使用方。
确认是否真为浅拷贝引发
先排查是否真的复用了原始节点对象：
- 打印两个树的数据源：
console.log(tree1Data === tree2Data)，若为true，说明是同一引用 - 检查初始化代码：是否写了类似
this.treeAData = this.rawMenuList或Object.assign({}, this.rawMenuList)——后者对嵌套对象仍是浅拷贝 - 观察勾选行为：只操作一棵树，另一棵树的
checkedKeys或节点checked字段是否同步变化？若是，基本可锁定引用污染
用深拷贝彻底隔离节点数据
必须确保每棵树拥有完全独立的节点对象（包括所有子节点），推荐以下方式：
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
简单结构（无函数、undefined、Date 等）：用
JSON.parse(JSON.stringify(menuData))最快最稳 -
含函数/特殊类型或需兼容老环境：手写递归拷贝，或使用 Lodash 的
cloneDeep -
Vue3 + script setup 场景：避免在
computed中返回原始数组，改用toRef+ 深拷贝逻辑封装函数
避免“伪深拷贝”陷阱
这些写法看似新建了数组，但节点对象仍共用，无法防串流：
-
[...menuData]—— 只拷贝第一层，子节点children还是原引用 -
menuData.map(item => ({ ...item }))—— 同样只展开一层，item.children未处理 -
Object.assign({}, menuData)—— 仅适用于单层对象，对树形结构无效
正确做法是对整个树结构做递归深拷贝，例如：
const deepCloneTree = (node) => ({...node,
children: node.children?.map(deepCloneTree) || []
});
const treeAData = deepCloneTree(rootNode);
配合 Tree 组件的 key 管理机制
某些树组件（如 Element Plus el-tree）依赖节点 key 做状态映射。若多棵树共用相同 key 值且数据引用未隔离，内部状态缓存可能互相干扰：
- 确保每棵树的节点
key全局唯一（例如加前缀：`treeA_${id}`） - 调用
setCheckedKeys前，确认传入的 keys 是基于当前树独立数据生成的，而非从另一棵树直接取值 - 异步加载场景下，
setCheckedKeys需等节点真实渲染完成（用nextTick或onNodeExpand回调后执行）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
