本文详解 Vue 3 中通过 computed 过滤响应式 ref 数组时的常见错误——遗漏 filter 回调函数的 return 语句，并提供可运行的修复方案与最佳实践。
本文详解 vue 3 中通过 `computed` 过滤响应式 `ref` 数组时的常见错误——遗漏 `filter` 回调函数的 `return` 语句，并提供可运行的修复方案与最佳实践。
在 Vue 3 组合式 API 中，使用 computed 对 ref 包裹的数组（如 posts.value）进行过滤时，一个极易被忽略却致命的问题是：Array.prototype.filter() 的回调函数必须显式返回布尔值，否则过滤逻辑将失效，返回空数组或原始数组（取决于引擎行为），导致 UI 渲染异常。
观察原代码中的计算属性：
const computedFilteredList = computed(() => {
return posts.value.filter((post) => {
console.log(post)
post.tags.includes(route.params.tag) // ❌ 缺少 return！此行无返回值，等价于 return undefined
})
})
由于箭头函数中使用了 {} 代码块但未写 return，JavaScript 默认返回 undefined。而 filter 将 undefined 视为 false，因此所有元素均被排除，computedFilteredList.value 恒为空数组 —— 这正是“Computed property has no result”的根本原因。
✅ 正确写法（显式返回）：
const computedFilteredList = computed(() => {
return posts.value.filter(post => {
console.log(post)
return post.tags.includes(route.params.tag) // ✅ 显式返回布尔值
})
})
✅ 更简洁写法（隐式返回，适用于单表达式）：
const computedFilteredList = computed(() => posts.value.filter(post => post.tags.includes(route.params.tag)) )
⚠️ 注意：隐式返回仅适用于省略
{}的单行箭头函数；一旦添加console.log()等语句，就必须用{}+return。
vue-composition-api-best-practicesVue 3 组合式 API 与
更多热门下载
更多相关下载
更多精品课程
相关推荐/热门推荐/最新课程更多最新文章
