uni-app中多级树形选择器需用v-for+自定义递归实现，子组件显式接收list/level等参数；路径回传应透传而非向上查找；性能优化需用transform动画、虚拟滚动及缓存节点高度。
uni-app里用recursive组件实现多级树形选择器行不通
uni-app官方不支持原生recursive组件（如微信小程序的recursive属性），直接写<template is="item"></template>或依赖is动态模板会报错或渲染异常。必须改用v-for + 自定义递归逻辑，且子组件必须显式接收list和level等参数。
常见错误现象：TypeError: Cannot read property 'forEach' of undefined——通常是因为父层传入的children字段名不统一（比如后端返回subItems或nested，但代码里硬写item.children）；或者初始数据未做空值保护。
- 始终用
v-if="Array.isArray(item.children) && item.children.length"判断是否展开子节点，别只靠v-for隐式判断 - 在父组件传入时统一字段映射，例如：
:node-key="'id'" :children-key="'children'"，子组件内部用props.childrenKey取值 - 避免在
data()里直接写嵌套响应式对象，深层树结构建议用computed或watch控制展开状态，否则Vue.set补丁难维护
点击节点时如何准确回传完整路径（含所有祖先节点）
单纯 emit item.id不够，业务常需「选中节点 + 其所有父级 id 和 label」用于面包屑或权限校验。关键在于：子组件不能只知道自己是谁，还要知道“我在哪一层”以及“上面是谁”。
实操建议是把路径信息作为参数向下透传，而不是向上收集。父组件传入一个path数组（初始为空），每次递归子组件时，将当前item推入新数组并传给下一级：
<tree-item
v-for="child in item[childrenKey]"
:key="child[nodeKey]"
:item="child"
:path="[...props.path, { id: item[nodeKey], label: item[labelKey] }]"
:node-key="nodeKey"
:children-key="childrenKey"
:label-key="labelKey"
@select="onSelect"
/>
这样每个子组件拿到的props.path就是从根到自己的完整路径，点击时直接emit('select', { node: item, path: props.path })即可。
- 别在子组件里用
this.$parent向上找路径——跨多层后不可靠，且破坏组件封装 - 如果路径需包含根节点自身，注意父组件调用第一层时要手动把根加进
path，或在子组件内做props.path.length === 0 ? [item] : props.path兜底 - 路径数组引用要每次新建（用
[...]或concat），否则多个分支会共享同一数组导致状态污染
性能瓶颈出现在展开/收起动画和大量节点渲染
当树深度＞5 或单层节点＞50，频繁切换v-if会导致卡顿，尤其在低端安卓机上。uni-app 的v-show对display: none支持不稳定，不能简单替代。
真实可用的优化点很具体：
- 用
transform: scaleY(0)+transition代替v-if控制显隐，配合ref手动触发重排，比纯声明式更可控 - 对非可视区域节点启用“虚拟滚动”逻辑：只渲染视口上下各3层，其余用
height: 0; overflow: hidden占位，监听scroll事件动态更新renderRange - 禁止在
computed里做JSON.parse(JSON.stringify(tree))深拷贝——树越大越慢；改用lodash.cloneDeep按需引入，或用structuredClone（仅支持较新平台） - 真机调试时发现
uni.createSelectorQuery()查节点高度耗时？那就缓存每层offsetHeight到item.__height，后续直接读
父子组件通信中容易漏掉的两个边界条件
一个是“全选/取消全选”同步问题：父组件控制checkedKeys，但子组件内部有独立isChecked状态，没用v-model双向绑定就会不同步；另一个是“叶子节点不可展开”，但后端字段缺失children或为null，导致v-for报错而非静默跳过。
- 用
v-model:checked="item.checked"并配合modelValueprop +update:checkedevent 实现真正双向，别只靠props传入+emit通知 - 子组件内部取子节点前统一处理：
const children = item[props.childrenKey] || []，永远返回数组，哪怕后端给null或undefined - 如果某节点
disabled: true，不仅要禁用点击，还得在checked计算中排除它——否则全选时它会被误勾，且无法取消 - iOS 下
input[type="checkbox"]样式失效？直接用view模拟，通过class切换iconfont图标，别依赖原生控件
最麻烦的其实是后端字段不规范和前端默认行为不一致之间的拉锯——比如“展开态”该存在item.expanded还是全局expandedKeys，这个得和接口文档对齐，否则改一处，十处崩。
