这是 的原生行为，不是 bug；浏览器将其视为纯文本容器，不解析嵌套模板语法，需手动递归克隆、填充并处理树结构数据，避免栈溢出与性能问题。
递归组件里 template 标签不展开，只看到原始 HTML 字符串
这是 的原生行为，不是 bug。浏览器把 当作纯文本容器，不会解析里面的嵌套 、{{item.name}}）。你用 cloneNode(true) 拿到的只是静态 DOM 片段，所有子模板仍处于“休眠”状态。
必须手动处理：拿到数据后，逐层匹配当前层级模板，克隆、填充占位元素（如 data-slot="children"），再对子节点递归调用同一逻辑。不能指望浏览器自动递归展开。
- 别在
里写 - 避免用
innerHTML直接拼接，否则事件绑定全丢，且无法做节点复用 - 每次
cloneNode(true)都是深拷贝，大数据量树形结构要加节流或虚拟滚动
递归深度失控导致栈溢出或渲染空白
Vue 报 RangeError: Maximum call stack size exceeded，React 渲染空白，大概率不是递归写错了，而是数据没预处理成树结构。接口返回的扁平数组（带 parentId）不能直接传给递归组件 —— 每次 render 都会重跑建树逻辑，O(n²) 复杂度直接卡死。
必须在组件外一次性完成扁平转树：
- 用
Map缓存所有节点，键为id，值为整个对象 - 遍历一次，对每个节点查
parentId对应的父项，push到父项的children数组 - 统一处理边界：
parentId是0、null、''还是undefined？建议全转成undefined再判断根节点
DOM 深度超 3 层引发布局卡顿
Chrome DevTools 的 Layout 阶段能直接观测到耗时跃升 —— 不是“可能变慢”，而是真实设备上首屏延迟 20–50ms 的常见原因。语义必需的 ul→li→a 三层不可删，但不能再套 div 包裹 a。
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
替代方案更轻量：
- 图标+文字对齐改用
display: flex或grid，1 层 DOM 就够 - 折叠箭头用
::after伪元素生成，不新增标签 - 清空子菜单时操作
ul.innerHTML = ''，别包一层div class="submenu-wrapper"
PHP 递归函数拼错 HTML 层级或重复嵌套
错误写法是把累积字符串当全局变量传参，导致子树内容被重复拼接、second/third 类名错位。核心约束只有三条：
-
$depth必须作为参数传入下一层，不能用全局计数器或静态变量 - 每层函数体内只构建本层
li，子树 HTML 由renderCategoryTree($child, $depth + 1)返回后拼接 - 不在循环里反复赋值
$children[] = $html这类冗余操作 —— 它不改变输出逻辑，只增加维护成本
真正容易被忽略的是：递归边界和字段容错。比如 $child['sub'] 可能不存在、为空或不是数组，$child['name'] 和 $child['link'] 也得有默认 fallback，否则 Notice 错误会污染输出。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
