关键在于用数据类型驱动渲染分支并隔离校验：先绑定顶层数据，再.each()按type/haspages分支处理；子节点动态加载依赖状态更新与异步响应；安全装配需html转义、children显式初始化、层级限制及id唯一性。

关键不在“捕获变量”，而在于用数据结构驱动渲染逻辑，让子节点装配由类型判断和状态管理自动完成，不依赖手动变量提取。

用数据类型决定渲染分支，避免 undefined 访问

类目树中常混有 header、可展开菜单、纯链接项等不同节点。若统一用 .selectAll().data().enter() 绑定，遇到没有 children 或 hasPages 字段的节点时，会直接报错 undefined is not iterable。正确做法是先绑定顶层数据，再对每个节点用 .each() 分支处理：

• 检测 d.type === 'header' → 只渲染标题文本，不生成 <ul></ul>
• 检测 d.hasPages && d.hasPages.length → 渲染带下拉箭头的菜单项，并嵌套生成子 <ul></ul>
• 否则 → 渲染为普通可点击项，无折叠逻辑

子节点动态加载需靠状态+异步响应，而非静态变量

所谓“全自适应”，是指子节点不预加载，只在用户点击展开时才请求或计算。这需要两个配合：

• 节点对象必须含唯一 id 和标识字段（如 isExpandable: true），用于触发后续逻辑
• 点击事件中不直接操作 DOM，而是更新节点状态（如 expanded = true），再调用重绘函数——该函数根据当前状态重新生成子列表
• 若子项来自接口，就在状态变更后发 axios.get(`/api/categories/${id}/children`)，成功后再合并进数据源并刷新视图

安全装配的核心是隔离与校验，不是变量命名

“安全”指防止 XSS、非法节点注入、无限递归展开等风险。实际落地要点包括：

• 所有用户输入类目名、描述等字段，渲染前必须做 HTML 转义（如用 DOMPurify.sanitize()）
• 子节点数组必须显式初始化（children: []），禁止留 undefined 或 null
• 递归渲染层级设硬限制（如最多 4 层），避免恶意构造超深树导致栈溢出
• 每个子节点的 id 必须全局唯一且不可预测（推荐用 crypt.randomUUID() 或服务端生成）