Computed 动态过滤需依赖响应式数据，通过 v-model 绑定输入参数，在 computed 中实现无副作用、纯函数式过滤，支持多条件联动与大小写不敏感匹配，并在大数据量时结合 v-memo 等优化渲染。
Computed 动态过滤的关键，是让 Vue 自动感知“原始数据”和“用户输入参数”的变化，并只在必要时重新执行 filter 逻辑——不手动调用、不重复计算、不触发副作用。
确保输入参数是响应式数据
用户输入必须绑定到一个响应式字段上，否则 computed 无法追踪变化：
- Options API：在 data() 中声明，比如 searchKey: ''
- Composition API：用 ref('') 或 reactive({ searchKey: '' })
- 表单绑定用 v-model="searchKey"，保证输入实时更新该响应式变量
在 computed 中做轻量、纯函数式过滤
过滤逻辑要满足“无副作用、只依赖响应式数据、返回新数组”：
- 开头加空值判断：if (!this.searchKey.trim()) return this.list，避免无意义遍历
- 统一转小写比对：this.searchKey.toLowerCase() 和 item.name?.toLowerCase()
- 多字段匹配用 || 连接，每个字段加可选链 ?. 防 undefined 报错
- 不要在 computed 里发请求、改 data、写 console.log 或调用 Date.now()
多条件共存时，把所有筛选项收口到同一个 computed
比如同时有关键词、分类 ID、状态、时间范围，全部在一个 filteredList 里联动处理：
- 每个条件用 !this.xxx || ... 判断是否启用，未选即跳过该条件
- 字符串匹配保持大小写不敏感，日期比较先转 new Date() 再比对
- 筛选完立刻链式 .sort()，不用拆成两个 computed，减少依赖链和计算次数
大数据量时的实用优化点
列表超 5000 条时，光靠 computed 不够，需配合渲染层优化：
- Vue 3.2+ 可给 v-for 加 v-memo，跳过未变化项的 patch
- 搜索为空时直接返回原数组引用，不 new 数组、不 filter
- 复杂匹配逻辑可抽成独立函数（如 matches(item, key)），但函数本身不能有响应式依赖以外的状态
