用 computed 实现列表搜索过滤的核心是将原始数据和搜索关键词作为响应式依赖，Vue 自动追踪变化并重新计算结果；搜索关键词需用 ref 或 data 声明为响应式，computed 中通过 filter 返回新数组，建议统一转小写比对，多字段搜索用 || 连接，防抖须在事件中处理而非 computed 内。

用 computed 实现列表搜索过滤，核心就一条：把“原始数据”和“搜索关键词”作为响应式依赖，让 Vue 自动追踪变化、重新计算过滤结果——不用手动调用方法，也不用 watch 监听，干净又高效。

搜索关键词必须是响应式数据

确保你在 data 或 setup 中定义了搜索关键词（比如 searchKey），并且它能被 Vue 正确响应。如果用 Options API，直接写在 data 里；Composition API 就用 ref 或 reactive 包裹：

• Options API：// data() { return { searchKey: '' } }
• Composition API：// const searchKey = ref('')

computed 返回过滤后的新数组（不修改原列表）

在 computed 中对原始商品列表做 filter 操作，建议统一转小写比对，避免大小写干扰：

• // computed: { filteredList() { return this.list.filter(item => item.name.toLowerCase().includes(this.searchKey.toLowerCase())) } }
• 如果要支持多字段搜索（比如搜名称、品牌、分类），用逻辑或 || 连接多个 includes 判断
• 注意：filter 不会改变原数组，安全可直接用于 v-for 渲染

加防抖？别在 computed 里做

computed 是响应式求值机制，不是事件处理器——它没有执行时机控制能力。防抖必须放在输入事件（如 @input 或 @keyup）中处理 searchKey 的更新，比如用 lodash.debounce 包裹赋值逻辑，再把防抖后的值同步给 searchKey。computed 只负责“一旦 searchKey 变了，立刻算出新列表”。

性能优化小提醒

如果商品列表特别大（比如上千条），filter 每次都遍历可能卡顿。这时可以：

• 前端加节流（同防抖思路，但更激进）
• 搜索长度
• 考虑用 indexOf 替代 includes（部分场景略快，但可读性稍差）

不过大多数电商列表（