不能直接递归展开，因其仅为惰性容器，content是只读documentfragment，不解析、不执行、不绑定数据；嵌套的、{{item.name}}、均无效，必须手动遍历数据、逐层克隆填充并递归处理子节点。
为什么<template></template>不能直接递归展开
浏览器原生的 <template></template> 标签只是惰性容器，它的 content 是只读的 DocumentFragment，不解析、不执行、不绑定数据。你嵌套写一个 <template></template> 里再放一个 <template></template>，它就真的只是字符串——{{item.name}} 不会替换，<slot></slot> 不会分发，data-slot="children" 也不会自动挂载子节点。
常见错误现象：cloneNode(true) 后查 querySelector('template') 还能拿到子 <template></template> 元素，但里面的内容仍是文本节点，没变成可操作 DOM；用 innerHTML 往 <template></template> 里塞内容再克隆，结果变量没填充、事件没绑定、结构错乱。
- 必须手动遍历数据，逐层匹配模板、克隆、填值、再递归处理子节点
-
<slot></slot>在普通<template></template>中完全无效——它只在自定义元素的 Shadow DOM 里激活 - 想让子节点“活起来”，得自己调
cloned.querySelector('[data-slot="children"]')，清空后appendChild(递归生成的 frag)
如何安全地克隆并注入数据到多层<template></template>
每次调用 template.content.cloneNode(true) 都是深拷贝，不能复用同一份节点引用，否则所有实例会共享状态（比如 input 值、checked 状态）。
填值时别用 innerHTML 拼接，有 XSS 风险，还会破坏已绑定事件；推荐用 querySelector 找目标元素后设 textContent 或 value。
- 克隆前先检查
template.content是否为空——innerHTML返回空字符串是正常行为，必须用content属性访问 - 含
<script></script>或<style></style>的模板，cloneNode(true)不会执行脚本、不会重复加载样式，别指望它自动生效 - 插入前用
document.createDocumentFragment()汇总所有克隆节点，最后一次性appendChild(frag)，避免频繁重排 - 克隆后注意重复
id：比如弹窗里的id="close-btn"，多个实例会冲突，建议改用data-id或动态生成唯一标识
递归渲染时怎么防栈溢出和 DOM 深度失控
HTML 嵌套超过 6 层，不是语法错误，但会触发真实问题：Chrome DevTools 显示 depth 超 6 就该警惕；CSS 选择器如 nav ul ul ul li 匹配退化；屏幕阅读器不再播报层级；Sass 递归宏可能爆栈。
后端返回的扁平数据（如 [{id:1,parentId:0},{id:2,parentId:1}]）不能直接递归渲染，必须预处理成树形结构。
- 递归函数入口加深度守卫：
if (depth > 6) return document.createDocumentFragment() - 预处理用
Map构建父子索引，一次遍历完成挂载，避免 O(n²) 查找 - 必须检测循环引用：用
Set记录已处理id，遇到重复立即中断 - 大数据量树形结构（如 500+ 节点）建议加节流或虚拟滚动，别全量渲染
Vue/React 递归组件里key和v-if怎么写才不翻车
漏掉关键守卫，轻则节点错乱，重则白屏或栈溢出。Vue 的 v-for 递归调用自身组件时，:key 和 v-if 必须严格配合数据结构。
-
:key必须基于唯一标识，写成:key="item.id"，别用:key="index"——否则折叠/展开时子菜单顺序错乱 -
v-if要双重判断：v-if="item.children && item.children.length"，空数组也要拦住，不然会渲染空<ul></ul>干扰样式 - 最后一级需单独处理逻辑（如展示
item.value），不能靠统一模板兜底，否则深层节点丢失关键字段 - React 中同理：递归组件参数必须含
children数组，且每次调用传入新对象引用，避免 memo 失效
最易被忽略的是：服务端吐出的 SSR HTML 和客户端用 <template></template> 动态插入的片段，hydration 边界不一致——前者能恢复状态，后者只是静态 DOM，事件和响应式完全丢失。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
