本文详解 Vue 3 组合式 API 下 Array.prototype.filter() 返回空数组的根本原因——箭头函数隐式返回缺失，并提供两种正确写法、可复用示例及关键注意事项。
本文详解 vue 3 组合式 api 下 `array.prototype.filter()` 返回空数组的根本原因——箭头函数隐式返回缺失，并提供两种正确写法、可复用示例及关键注意事项。
在 Vue 3 的 computed 属性中使用 filter() 方法时，若回调函数未显式返回布尔值，会导致过滤逻辑失效——看似条件判断正确（如 console.log 显示 true/false），但实际 filter() 接收到的是 undefined，而 filter() 会将所有 undefined 视为 falsy，最终返回空数组。
问题根源在于 JavaScript 箭头函数的隐式返回规则：
- 当使用圆括号包裹的单表达式（如 person => person.name.includes('a')）时，自动隐式返回该表达式结果；
- 但一旦使用花括号 {} 定义函数体（即块级语句），就必须显式使用 return 语句，否则默认返回 undefined。
你的代码中正是后者：
(person) => {
person.FirstName.toLowerCase().includes(filter.toLowerCase()) // ❌ 无 return，返回 undefined
}这导致 filter() 始终接收 undefined，等价于全部剔除，因此 filteredPerson 恒为空数组。
立即学习“前端免费学习笔记（深入）”；
✅ 正确写法（二选一）
方案一：显式 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());
});
});方案二：省略花括号，利用隐式返回（更简洁）
const filteredPerson = computed(() => {
const filter = filterText.value.trim();
if (!filter) return jsonDataPersons.value;
return jsonDataPersons.value.filter(
person => person.FirstName.toLowerCase().includes(filter.toLowerCase())
);
});? 提示：trim() 可避免因输入空格导致的意外匹配失败，属于实用增强。
? 验证与调试建议
在开发阶段，可通过以下方式快速定位问题：
// 在 filter 回调中临时添加调试
return jsonDataPersons.value.filter(person => {
const match = person.FirstName.toLowerCase().includes(filter.toLowerCase());
console.log(`Filtering "${person.FirstName}" with "${filter}": ${match}`);
return match;
});⚠️ 注意事项与最佳实践
- 不要直接修改响应式数据结构：jsonDataPersons.value 是响应式引用的原始值，filter() 返回新数组，符合 Vue 3 的响应式设计原则，无需额外 toRef 或 readonly 包装；
- 空值防御：确保 jsonDataPersons.value 初始化为数组（如 ref([])），而非空对象 ref({})，否则调用 .filter() 会抛出 TypeError；
- 性能考量：若数据量极大（>1000 条），可考虑防抖（debounce）搜索输入，避免频繁触发 computed 重计算；
- 大小写与空格处理：示例中已包含 .toLowerCase() 和 .trim()，生产环境建议统一标准化（如使用 normalize('NFD').replace(/[\u0300-\u036f]/g, '') 处理变音符号）。
✅ 完整可运行片段（Vue 3 SFC）
<script setup>
import { ref, computed, onBeforeMount } from 'vue'
const jsonDataPersons = ref([])
const filterText = ref('')
// 模拟 API 调用
onBeforeMount(async () => {
// 实际应替换为 axios/fetch
jsonDataPersons.value = [
{ UID_Person: '160a5b9e...', FirstName: 'Maxi', LastName: 'Mustermensch' },
{ UID_Person: '268b3627...', FirstName: 'Chris', LastName: 'Mustermenschen' },
{ UID_Person: '8e7344c3...', FirstName: 'Max', LastName: 'Mustermann' },
{ UID_Person: '9dab6de1...', FirstName: 'Hans', LastName: 'Muster' }
]
})
const filteredPerson = computed(() => {
const filter = filterText.value.trim()
if (!filter) return jsonDataPersons.value
return jsonDataPersons.value.filter(person =>
person.FirstName.toLowerCase().includes(filter.toLowerCase())
)
})
</script>
<template>
<main>
<div class="wrapper">
<h1 class="title-page">Person List</h1>
<div class="wrapper-list">
<input
class="search"
type="text"
placeholder="Search for person..."
v-model="filterText"
/>
<div
v-for="person in filteredPerson"
:key="person.UID_Person"
class="list-item"
@click="() => console.log('Go to:', person.UID_Person)"
>
{{ person.FirstName }} {{ person.LastName }}
</div>
</div>
</div>
</main>
</template>掌握箭头函数的返回机制，是避免此类“逻辑正确却无输出”问题的关键。在 Vue 3 的响应式系统中，computed 的纯净性依赖于每个子表达式的确定性返回——一次遗漏的 return，就足以让整个过滤链失效。
