递归渲染时HTML嵌套超6层会引发性能、可访问性及稳定性问题：DOM构建变慢、CSS选择器匹配退化、屏幕阅读器失效、Sass编译栈溢出；须预处理为树形结构、防循环引用、设深度兜底、用DocumentFragment或事件委托、正确设置key与v-if守卫。
递归渲染时 HTML 嵌套深度超过 6 层会怎样
浏览器能渲染几十层 ul，但实际超过 6 层就大概率触发性能或可访问性问题。不是语法错误，而是 DOM 构建、样式计算和屏幕阅读器播报三重压力叠加。
- DOM 解析变慢：每层嵌套都增加节点创建开销，Chrome DevTools 的 “DOM properties” 中
depth值超 6 就该警惕 - CSS 选择器匹配退化：像
nav ul ul ul li这类选择器从右往左回溯时路径过长，尤其在有大量匹配项时易拖慢重绘 - 无障碍失效：屏幕阅读器对深层
ul不报层级，用户听到一串无上下文的列表项，容易迷失 - Sass 编译可能爆栈：SCSS 递归宏若没设
$depth > 6提前@return，会直接报Stack level too deep
为什么必须先转树形结构再递归渲染
前端递归函数不接受扁平数组——它只认“每个节点自带 children 数组”的树形结构。后端返回的 [{id:1,parentId:0},{id:2,parentId:1}] 这类数据，直接传给递归组件只会渲染第一层。
- 必须用
Map或哈希表预处理：遍历一次，把所有节点按parentId归组，再逐个挂载子节点 - 要防循环引用：比如
parentId指向自身，或父子 ID 错配，递归前得用Set记录已处理id - 深度兜底不能少：递归调用时加
if (depth > 6) return ''，避免无限展开导致内存溢出或白屏
原生 JS 递归拼接 HTML 容易丢事件
用 innerHTML += 或字符串拼接生成嵌套菜单，最常踩的坑是事件监听器丢失——新插入的 li 节点没绑定点击逻辑，折叠/展开功能直接失效。
- 别用
innerHTML累加：每次赋值都会销毁并重建整个子树，已绑定的事件全清空 - 改用
DocumentFragment：递归中创建document.createDocumentFragment()，最后一次性append - 事件委托更稳：给最外层
ul绑定click，用e.target.matches('.nav-item--has-children')判断目标，不依赖节点是否“已存在” - 如果用了
<template>，注意它只是静态片段：cloneNode(true)后得手动填充文本、查data-slot、递归挂载子节点，浏览器不会自动展开
Vue/React 递归组件的 key 和 v-if 守卫怎么写才安全
v-for 里直接递归调用自身组件没问题，但漏掉两个关键守卫，轻则重复渲染，重则栈溢出。
立即学习“前端免费学习笔记（深入）”；
-
:key必须基于唯一标识：写成:key="item.id"，别用:key="index"，否则子菜单展开/收起时节点错乱 -
v-if要双重判断：v-if="item.children && item.children.length"，空数组也得拦住，不然会渲染空ul干扰样式 - Vue 里加
v-show比v-if更适合折叠状态切换：避免反复卸载/挂载组件，尤其含表单或定时器时 - React 中状态要提升：用
Set存openKeys，子组件只负责读，不自己维护isOpen，否则嵌套深了状态不同步
