Vue 3 使用 computed 配合数组 filter() 时，若回调函数使用带花括号 {} 的箭头函数却未显式 return，会导致过滤函数始终返回 undefined，进而使 filter() 视为 false，最终返回空数组。
vue 3 使用 `computed` 配合数组 `filter()` 时，若回调函数使用带花括号 `{}` 的箭头函数却未显式 `return`，会导致过滤函数始终返回 `undefined`，进而使 `filter()` 视为 `false`，最终返回空数组。
在 Vue 3 的响应式逻辑中，filter() 方法依赖回调函数的明确布尔返回值（true 表示保留，false 表示过滤掉）。而 JavaScript 箭头函数存在两种语法形式，其返回行为截然不同：
- ✅ 简洁体（concise body）：param => expression —— 自动隐式返回表达式结果
- ❌ 块体（block body）：param => { statements } —— 必须显式写 return，否则默认返回 undefined
你的代码中正是踩中了这个经典陷阱：
// ❌ 错误：块体箭头函数，缺少 return → 每次返回 undefined
(person) => {
person.FirstName.toLowerCase().includes(filter.toLowerCase())
}由于 undefined 在布尔上下文中为 falsy，filter() 将所有元素判定为“不匹配”，最终返回空数组 []，导致模板中 v-for="person in filteredPerson" 渲染为空。
✅ 正确写法（任选其一）
方式一：使用简洁体（推荐）—— 更简洁、不易出错
立即学习“前端免费学习笔记（深入）”；
const filteredPerson = computed(() => {
const filter = filterText.value.trim();
if (!filter) return jsonDataPersons.value;
return jsonDataPersons.value.filter(
person => person.FirstName.toLowerCase().includes(filter.toLowerCase())
);
});方式二：使用块体 + 显式 return
const filteredPerson = computed(() => {
const filter = filterText.value.trim();
if (!filter) return jsonDataPersons.value;
return jsonDataPersons.value.filter(person => {
return person.FirstName.toLowerCase().includes(filter.toLowerCase());
});
});? 补充注意事项
- 空格处理：建议对用户输入调用 .trim()，避免因首尾空格导致搜索失败；
-
空数组/未初始化保护：jsonDataPersons.value 初始为 ref({})（空对象），但 filter() 要求操作对象为数组。应初始化为 ref([])，并在 API 加载完成前确保数据结构正确：
const jsonDataPersons = ref([]); // ✅ 改为数组
- 大小写与性能：.toLowerCase() 是安全的，但若数据量极大，可考虑在 computed 外预处理索引（如构建搜索缓存），此处无需过度优化；
-
多字段搜索扩展（进阶）：如需同时匹配 FirstName 和 LastName，可改用逻辑或：
person.FirstName.toLowerCase().includes(filter) || person.LastName.toLowerCase().includes(filter)
? 总结
filter() 不返回结果，90% 的情况并非数据或逻辑问题，而是回调函数未正确返回布尔值。牢记箭头函数的返回规则：有花括号必写 return；无花括号则自动返回。在 Vue 响应式计算属性中，这一细节直接影响整个列表的渲染行为——看似微小的语法差异，却是调试中最易忽略的关键点。
