计算属性比 methods 更适合过滤，因其自动追踪依赖、缓存结果、仅在 searchkeyword 或原始列表变化时重算，避免高频无效运算；模板中用 v-for="item in filtereditems" 更简洁高效，且利于 diff 优化。
用计算属性替代方法做数据过滤和搜索，核心是让 Vue 自动追踪依赖、缓存结果、只在必要时重算。不用每次输入都调用函数，也不用手动触发更新，模板直接用 filteredItems 就行，既简洁又高效。
为什么计算属性比 methods 更适合过滤
methods 每次渲染都会重新执行，哪怕输入没变、列表没变，也会反复跑 filter 逻辑；computed 则不同——它只在 searchKeyword 或原始列表变化时才重新计算，其余时候直接返回缓存值。这对搜索这种高频交互场景特别关键，避免无效运算拖慢响应。
- methods 是“每次都算”，computed 是“有变化才算”
- 计算属性天然支持响应式联动，比如加个状态筛选，只需在同一个 computed 里加条件，无需改调用逻辑
- 模板中写 v-for="item in filteredItems" 比 v-for="item in filterList()" 更清晰，也更利于 Vue 的 diff 优化
怎么用 computed 实现基础搜索过滤
先在 data 或 setup 中定义 searchKeyword: ""，再用 v-model.trim="searchKeyword" 绑定输入框。然后在 computed 中写一个 filteredItems：
- 判断 searchKeyword.trim() === ""，是则直接返回原始数组，避免空字符串匹配出错
- 否则遍历原始列表，对每项的 name、title 等字段做 toLowerCase().includes()，统一转小写提升容错
- 多字段支持用 || 连接，比如 item.title.includes(kw) || item.desc.includes(kw)
模板里怎么配合使用
不再遍历原始 items，而是直接 v-for="item in filteredItems"，并确保每个元素都有唯一 :key="item.id"。可以加一层提示：
- v-if="filteredItems.length === 0 && searchKeyword" 显示“没找到匹配项”
- v-else 渲染正常列表
- 不需要在模板里写逻辑判断或调用函数，所有处理都在 computed 里完成
进阶但实用的优化点
基础过滤已覆盖大多数需求。若列表项超过百条或用户输入极快，可考虑：
- 防抖不加在 computed 里（它本身不支持异步），而是在 v-model 更新前节流，比如用 debounce 包裹赋值逻辑
- 高亮搜索词：过滤后，在模板中用 v-html 配合正则替换，但务必先用 textContent 转义原始内容，防 XSS
- 组合筛选（如加分类下拉）：把 category、status 等变量一起纳入 filteredItems 的判断条件，保持响应式联动
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
