computed实现树形结构模糊搜索的核心是响应式过滤并保留匹配节点及其所有祖先路径以维持层级结构。通过递归filterTree函数判断节点自身或后代是否匹配，再由computed依赖追踪自动更新结果，支持多字段匹配、高亮及性能优化。
利用 computed 实现树形结构的模糊搜索，核心在于：**响应式地过滤并保留匹配节点及其所有祖先路径，同时维持原有层级结构**。这不是简单地 flat 后过滤，而是“有选择地展开子树”。
理解关键逻辑：搜索不是扁平化，而是路径保留
树形搜索的难点在于——用户输入“node3”，可能匹配到深层叶子节点，但必须把它的父、祖父…一直到根都带出来，否则结构断裂、无法渲染。所以不能只返回匹配项，而要递归判断：当前节点是否匹配，或其任意后代匹配。
Vue 的 computed 天然适合这个场景：它依赖原始树数据和搜索关键词，一旦任一依赖变化，自动重算整个过滤后的树。
基础实现：递归过滤函数 + computed 封装
定义一个纯函数 filterTree，接收树数组、关键词、匹配字段（如 name）：
- 对每个节点，先检查自身是否满足模糊匹配（如
node.name.includes(keyword)） - 再递归处理
children，得到过滤后的子树 - 若自身匹配 或 子树非空，则保留该节点，并用过滤后的子树替换原
children - 若都不满足，直接跳过（不进入结果）
在 Vue 组件中：
computed: {
filteredTree() {
const keyword = this.searchKey.trim()
if (!keyword) return this.originalTree
return filterTree(this.originalTree, keyword, 'name')
}
}
增强体验：支持多字段匹配 & 高亮显示
实际项目中常需搜 name 或 desc，可扩展 filterTree 的匹配逻辑：
- 传入字段数组，如
['name', 'desc']，任一字段包含关键词即算匹配 - 在返回节点时，可添加临时标记（如
highlight: true），供模板做高亮样式 - 注意：不要修改原始数据，所有新增属性应在新对象中设置（可用
{...node, highlight: matched}）
性能注意：避免无谓递归与响应式开销
大深度/宽树容易卡顿，几个实用优化点：
- 关键词为空或过短（如
字）时，直接返回空数组或原树，避免启动递归 - 使用
JSON.stringify对比前后关键词（防重复计算），或用lodash.debounce节流输入 - 确保原始树是响应式对象；若从 API 获取，用
ref([])或reactive({ tree: [] })包裹，否则computed不会追踪变化
不复杂但容易忽略。
