uni-app中v-for递归渲染多级菜单无反应，因Vue 2不支持组件自调用，须显式声明name、注册自身组件、首字母大写标签名，并初始化children为空数组。
uni-app里用v-for递归渲染多级菜单为什么没反应？
因为 uni-app 的 Vue 2 运行时（默认）不支持组件自调用，直接写 <menu-item :list="item.children"></menu-item> 会报错或静默失败。必须显式声明递归组件名，并在 components 中注册自己。
- 在组件 script 中定义
name: 'MenuItem'（名称必须和模板中使用的标签名一致） -
components选项里要写MenuItem: MenuItem或直接写MenuItem（如果已用 import 引入） - 模板中不能用
<menu-item>小写形式——uni-app 编译器对自定义组件名大小写敏感，推荐首字母大写：<MenuItem> - 确保数据结构里每个子项都有
children字段（哪怕为空数组），否则v-if="item.children?.length"在 Vue 2 下会报错，建议统一初始化为[]
如何控制每级菜单的展开/收起状态而不互相影响？
不能共用一个 isExpanded 布尔值，得为每个菜单项单独维护状态。最稳妥的方式是给原始数据“打补丁”，挂载响应式字段。
- 用
JSON.parse(JSON.stringify(list))深拷贝原始数据，避免污染源数据 - 遍历所有节点，给每个对象添加
__expanded: false（双下划线前缀防冲突） - 点击事件里用
this.$set(item, '__expanded', !item.__expanded)确保响应式更新（Vue 2 限制） - 不要用
item.__expanded = ...直接赋值，否则视图不会更新 - 展开图标用
v-if="item.__expanded"控制，比绑定 class 更可靠
onReachBottom 拉到底部加载更多时，怎么只展开当前层级？
滚动加载和菜单展开是两个独立逻辑，但容易误绑在同一个事件上。关键在于区分触发源：点击图标是展开行为，滚动到底是数据追加行为。
- 把菜单展开逻辑完全交给
@click绑定的函数，例如@click="toggleExpand(item)" -
onReachBottom只负责调用接口、拼接新数据到对应节点的children数组 - 追加后需手动触发一次
this.$forceUpdate()或对新增节点也执行this.$set(...)初始化__expanded - 如果用了
uni.loadMore，注意它默认全局生效，多级菜单里要关掉：在页面onLoad里调用uni.hideLoading()+ 手动管理 loading 状态
真机调试时点击无响应或层级错乱，常见原因有哪些？
多数不是逻辑问题，而是平台差异或编译配置导致的隐性 bug。
- H5 端正常、App 端失效：检查是否用了
touchstart替代click（iOS 微信 WebView 对 click 有 300ms 延迟且偶发失效） - 子菜单位置偏移：父级
<view>缺少position: relative，导致absolute定位的下拉层错位 - 折叠后内容仍占空间：用
v-show替代v-if会导致 DOM 仍在，改用height: 0; overflow: hidden;+transition更可控 - 支付宝小程序不支持
ref获取递归子组件实例——需要改用事件总线或 vuex 通信
递归菜单真正的复杂点不在结构，而在状态隔离和跨端一致性。每个 __expanded 字段都要和对应数据节点强绑定，任何浅拷贝、引用复用、或编译器自动注入都可能让展开态“漂移”。
