从 0 到 1 开发 Splicetree无头树：可见节点计算：把“状态”变成“渲染列表”

SpliceTree 是一个无头（Headless）、框架无关的树运行时。专注树的结构、状态与行为，通过插件扩展勾选、拖拽、搜索、懒加载、键盘/点击选择等能力；UI 渲染由你决定，官方提供 Vue 3 适配器。

UI 层最关心的就是“当前该显示哪些节点”。核心通过维护展开状态与层级关系生成“可见节点列表”。

思路

• 预构建父子关系索引
• 按展开状态进行深度遍历
• 输出扁平的“可见序列”，每项包含 id/original/level

示例

const { items, expand, collapse } = createSpliceTree(data, { defaultExpanded: ['a'] })
for (const node of items()) {
  render(node) // UI 层直接循环
}

性能要点

• 避免 O(n²) 操作
• 缓存可见序列，在批量操作时合并事件
• 懒加载与搜索会影响可见性，均通过事件驱动刷新

• 相关链接：

• 文档与示例：www.splicetree.dev
• 仓库：Splice Tree