树的难点不在“长什么样”，而在“怎么交互”。展开/收起、勾选/半选、拖拽、搜索、键盘导航、单选/多选/范围选择……如果把这些都写在组件里，维护成本会越来越高。
SpliceTree 选择“无头（Headless）”路线：核心只负责树的结构与行为，渲染由你自己决定（Vue/React/Svelte/原生 DOM 都行）。这样一来，逻辑和 UI 解耦，交互更容易复用与组合。
- 相关链接：
- 文档与示例：www.splicetree.dev
- 仓库：Splice Tree
这条路能解决什么
- UI 自由：你可以用任何组件体系或自己写 DOM
- 交互可组合：用插件按需添加能力（勾选/拖拽/搜索/键盘/懒加载）
- 逻辑可复用：同一套树逻辑在不同页面或项目直接复用
一个最小示例
import { createSpliceTree } from '@splicetree/core'
const data = [
{ id: 'a', title: 'A' },
{ id: 'b', title: 'B', parent: 'a' },
]
const tree = createSpliceTree(data, {
keyField: 'id',
parentField: 'parent',
defaultExpanded: ['a'],
})
for (const node of tree.items()) {
console.log(node.id, node.level)
}
本系列会讲什么
- 核心数据模型与可见节点计算
- 事件系统与插件机制
- 输入插件（keyboard、pointer）与行为插件（selectable、checkable）
- 常用插件（拖拽、搜索、懒加载）
- Vue 适配器与工程化发布
