这是 的原生行为，不是 bug；浏览器将其视为纯文本容器，不解析嵌套模板语法，需手动递归克隆、填充并处理树结构数据，避免栈溢出与性能问题。
递归组件里 template 标签不展开，只看到原始 HTML 字符串
这是 <template></template> 的原生行为，不是 bug。浏览器把 <template></template> 当作纯文本容器，不会解析里面的嵌套 <template></template>、<slot></slot> 或模板语法（比如 {{item.name}}）。你用 cloneNode(true) 拿到的只是静态 DOM 片段，所有子模板仍处于“休眠”状态。
必须手动处理：拿到数据后，逐层匹配当前层级模板，克隆、填充占位元素（如 data-slot="children"），再对子节点递归调用同一逻辑。不能指望浏览器自动递归展开。
- 别在
<template></template>里写<slot></slot>—— 它只在 Shadow DOM 中生效，普通 template 里就是个无意义标签 - 避免用
innerHTML直接拼接，否则事件绑定全丢，且无法做节点复用 - 每次
cloneNode(true)都是深拷贝，大数据量树形结构要加节流或虚拟滚动
递归深度失控导致栈溢出或渲染空白
Vue 报 RangeError: Maximum call stack size exceeded，React 渲染空白，大概率不是递归写错了，而是数据没预处理成树结构。接口返回的扁平数组（带 parentId）不能直接传给递归组件 —— 每次 render 都会重跑建树逻辑，O(n²) 复杂度直接卡死。
必须在组件外一次性完成扁平转树：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 用
Map缓存所有节点，键为id，值为整个对象 - 遍历一次，对每个节点查
parentId对应的父项，push到父项的children数组 - 统一处理边界：
parentId是0、null、''还是undefined？建议全转成undefined再判断根节点
DOM 深度超 3 层引发布局卡顿
Chrome DevTools 的 Layout 阶段能直接观测到耗时跃升 —— 不是“可能变慢”，而是真实设备上首屏延迟 20–50ms 的常见原因。语义必需的 ul→li→a 三层不可删，但不能再套 div 包裹 a。
替代方案更轻量：
- 图标+文字对齐改用
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
