computed属性适合封装多条件筛选与多字段排序逻辑，自动依赖追踪、缓存结果、响应式更新；可抽离为工具函数复用，并需注意大数据量下的性能优化。
Vue.js 的 computed 属性非常适合封装复杂的数据处理逻辑，比如多重条件筛选 + 多字段排序。它自动依赖追踪、缓存结果、响应式更新，比在 methods 中反复调用更高效、更清晰。
用 computed 封装多条件筛选逻辑
把多个筛选参数（如关键词、状态、分类、时间范围）统一收口到一个计算属性中，避免在模板里堆砌冗长的 v-if 或在 methods 中重复判断。
示例：筛选商品列表
computed: {
filteredProducts() {
return this.products.filter(product => {
const matchesKeyword = !this.searchKey ||
product.name.toLowerCase().includes(this.searchKey.toLowerCase()) ||
product.sku.includes(this.searchKey);
const matchesStatus = !this.selectedStatus || product.status === this.selectedStatus;
const matchesCategory = !this.selectedCategory || product.categoryId === this.selectedCategory;
const matchesDate = !this.dateRange || (
(!this.dateRange.start || new Date(product.createdAt) >= new Date(this.dateRange.start)) &&
(!this.dateRange.end || new Date(product.createdAt) <= new Date(this.dateRange.end))
);
return matchesKeyword && matchesStatus && matchesCategory && matchesDate;
});
}
}关键点：
立即学习“前端免费学习笔记（深入）”；
- 每个筛选项都支持“未选择”（
null/undefined/''）时跳过判断 - 字符串匹配做大小写不敏感处理，提升体验
- 日期比较转为
Date对象再比对，避免字符串误判
在同一个 computed 中串联排序逻辑
不要另起一个 sortedProducts，而是在 filteredProducts 后直接链式调用 .sort()——这样既保证顺序（先筛后排），又只触发一次计算。
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
computed: {
filteredAndSortedProducts() {
return this.filteredProducts.sort((a, b) => {
// 按优先级依次比较：先按 sortWeight（数字越大越靠前），再按 createdAt 倒序
if (this.sortBy === 'weight') {
return (b.sortWeight || 0) - (a.sortWeight || 0);
}
// 按名称字母序（忽略大小写）
if (this.sortBy === 'name') {
return a.name.localeCompare(b.name, undefined, { sensitivity: 'base' });
}
// 默认按创建时间倒序
return new Date(b.createdAt) - new Date(a.createdAt);
});
}
}注意：
-
Array.prototype.sort()是原地修改，但 Vue 的响应式系统会正确追踪变化 - 多字段排序可嵌套判断，例如：
if (a.status !== b.status) return ...; else if (a.priority !== b.priority) return ... - 使用
localeCompare实现更准确的中文/国际化字符串排序
把筛选与排序配置抽离成可复用逻辑
当多个组件需要类似能力时，可将核心逻辑封装为函数，再在 computed 中调用，提升可维护性。
例如定义工具函数：
// utils/filterSort.js
export function createFilterSort(config) {
return function(items, filters, sortConfig) {
let result = [...items];
<pre class="brush:php;toolbar:false;">// 筛选
if (filters.keyword) {
const key = filters.keyword.toLowerCase();
result = result.filter(item =>
(item.name?.toLowerCase().includes(key) ||
item.desc?.toLowerCase().includes(key))
);
}
if (filters.status != null) {
result = result.filter(item => item.status === filters.status);
}
// 排序
if (sortConfig.field) {
result.sort((a, b) => {
const va = a[sortConfig.field];
const vb = b[sortConfig.field];
if (typeof va === 'string' && typeof vb === 'string') {
return sortConfig.desc
? vb.localeCompare(va, undefined, { sensitivity: 'base' })
: va.localeCompare(vb, undefined, { sensitivity: 'base' });
}
return sortConfig.desc ? vb - va : va - vb;
});
}
return result;}; }
在组件中使用：
import { createFilterSort } from '@/utils/filterSort';
<p>export default {
computed: {
processedList() {
return createFilterSort()(this.rawList, this.filters, this.sort);
}
},
data() {
return {
filters: { keyword: '', status: null },
sort: { field: 'createdAt', desc: true }
};
}
};性能与边界注意事项
computed 虽然缓存，但若数据量极大（如 >5000 条）或筛选/排序逻辑极重，仍可能造成卡顿。这时可考虑：
- 用
watch+debounce控制搜索输入触发频率 - 对长列表启用虚拟滚动（如
vue-virtual-scroller） - 服务端分页 + 筛选排序，前端只做轻量展示逻辑
- 避免在
computed中执行异步操作或 DOM 查询
另外，确保所有参与计算的响应式数据（如 this.products、this.searchKey）确实是 data、props 或其他 computed，否则依赖不会被正确收集。
