本文详解 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) // ✅ 显式返回布尔值
})
})✅ 更简洁写法（隐式返回，适用于单表达式）：
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
const computedFilteredList = computed(() => posts.value.filter(post => post.tags.includes(route.params.tag)) )
⚠️ 注意：隐式返回仅适用于省略
{}的单行箭头函数；一旦添加console.log()等语句，就必须用{}+return。
此外，还需修复两个关联问题以确保组件正常运行：
-
组件注册路径错误：
Spinner.vue被错误地当作composable导入（import Spinner from "@/composables/Spinner.vue"），实际应为组件。请修正为：import Spinner from "@/components/Spinner.vue"; // ✅ 改为 components 目录
-
组件循环引用警告：
Uncaught ReferenceError: Cannot access 'PostList' before initialization通常由组件未正确注册或存在循环依赖引起。确认PostList.vue已正确定义且无import自身行为；同时检查Tag.vue中components选项是否完整：components: { Spinner, PostList } // ✅ 确保已声明
最后，为增强健壮性，建议在过滤前校验 route.params.tag 是否存在，避免 includes(undefined) 报错：
const computedFilteredList = computed(() => {
const tag = route.params.tag
if (!tag || !Array.isArray(posts.value)) return []
return posts.value.filter(post =>
Array.isArray(post.tags) && post.tags.includes(tag)
)
})总结：Vue 中基于 computed 的数据过滤，本质是 JavaScript 数组方法的响应式封装，务必遵循原生 API 规范。filter、map、find 等高阶函数的回调逻辑错误，不会触发 Vue 报错，却会静默破坏响应式链路。养成检查返回值的习惯，是写出可靠 Vue 逻辑的关键一步。
