computed最适合轻量实时筛选排序，需确保条件响应式、排序字段分离、返回新数组；大数据量时应节流搜索、分页处理；多条件推荐链式过滤；异步场景用watch更灵活。
uni-app里怎么用computed做实时筛选和排序
直接用computed是最轻量、响应最及时的方式，尤其适合本地数据量不大（比如几百条以内）的列表。它会自动监听原始数据和筛选/排序条件的变化，无需手动触发更新。
常见错误是把过滤逻辑写在methods里再反复调用，结果页面不响应、或重复渲染卡顿。
- 筛选条件（如
searchKey、statusFilter）必须是响应式数据（定义在data或setup的ref/reactive中） - 排序字段和方向建议用两个独立变量控制，比如
sortBy（字符串）和sortOrder（'asc'或'desc'），避免用复合字符串如'price-desc'增加解析负担 - 注意
computed不能直接修改原数组，所有操作都应基于slice()或展开语法生成新数组，否则可能污染原始数据
computed: {
filteredAndSortedList() {
let list = this.rawList
// 筛选
if (this.searchKey) {
const key = this.searchKey.toLowerCase()
list = list.filter(item =>
item.title?.toLowerCase().includes(key) ||
item.tag?.toLowerCase().includes(key)
)
}
// 排序
if (this.sortBy && this.rawList.length > 0) {
list = [...list].sort((a, b) => {
const aVal = a[this.sortBy]
const bVal = b[this.sortBy]
if (aVal < bVal) return this.sortOrder === 'asc' ? -1 : 1
if (aVal > bVal) return this.sortOrder === 'asc' ? 1 : -1
return 0
})
}
return list
}
}
遇到大数据量（>1000条）卡顿怎么办
纯computed在每次条件变化时都会全量遍历+排序，1000条数据在低端安卓机上可能造成明显掉帧。这时候要拆开「筛」和「排」，并加节流或防抖。
- 搜索输入建议对
input事件加debounce（uni-app推荐用@input配合setTimeout手动实现，避免引入额外库） - 排序操作本身不用防抖，但可加
watch监听sortBy和sortOrder，只在变化时执行一次sort，而不是每帧都算 - 真到几千条，考虑前端分页（
currentList = filteredList.slice((page-1)*size, page*size)），别让视图层一次性处理全部数据
多条件联合筛选怎么组织逻辑才不易出错
多个下拉选择、日期范围、开关状态混在一起时，硬写嵌套if容易漏分支、难维护。推荐用“链式过滤”结构，每个条件独立判断，空值/未选状态直接跳过。
立即学习“前端免费学习笔记（深入）”；
- 把每个筛选项封装成函数，例如
filterByStatus(list, status)、filterByDateRange(list, start, end)，返回新数组 - 主过滤逻辑用
reduce串联：filters.reduce((acc, fn) => fn(acc), rawList)，可读性高且易单元测试 - 特别注意日期比较：uni-app中
input type="date"返回的是YYYY-MM-DD字符串，直接用/<code>>比较是安全的；但若后端返回时间戳或ISO格式，务必先转成Date对象再比
为什么watch + ref在setup里比computed更灵活
当筛选逻辑涉及异步（比如搜索关键词触发接口查新数据）、或需要中间状态（如“正在加载”）、或要复用同一份过滤结果到多个地方时，computed就不够用了——它必须同步返回值，且不可暂停。
- 用
watch监听多个响应式变量，内部可写async/await，也可手动控制是否执行（比如if (!keyword.trim()) return） - 结果存进另一个
ref（如filteredResults），模板里直接用，和computed写法一致，但行为更可控 - 注意：不要在
watch回调里直接修改被监听的源数据，容易引发循环触发
复杂筛选往往不是“写完就跑通”，而是得看数据结构是否规整、空值怎么处理、中文模糊搜索要不要用indexOf还是正则、排序时null或undefined字段放前面还是后面——这些细节不调试一两次根本发现不了。
