computed 可返回函数，需在外层显式读取响应式依赖；如 getFormatted 返回 (p,s)=>${p}${count}${s}，调用 getFormatted()('【','】') 得【5 — hello】。
可以，computed 本身不能直接“返回函数”并让它像方法一样被调用（比如 myComputed()(arg)），但你可以让计算属性的值是一个函数——这在 Vue 2 和 Vue 3 中都合法且实用，尤其适合需要动态传参、避免重复定义多个相似计算逻辑的场景。
为什么 computed 返回函数是合理的？
计算属性的本质是响应式地缓存一个“值”。这个“值”可以是数字、对象、数组，当然也可以是函数。只要它不破坏响应式依赖追踪（即内部不意外读取未声明的响应式数据），Vue 就能正常工作。关键在于：函数本身要“纯净”，执行时不产生副作用，且依赖的数据必须是响应式的。
基础写法：computed 返回一个函数
以下以 Vue 3 Composition API 为例（Vue 2 Options API 同理，只是写法略有不同）：
✅ 正确示例（推荐）：
const count = ref(5)
const message = ref('hello')
<p>// 计算属性返回一个函数
const getFormatted = computed(() => {
return (prefix = '', suffix = '') => {
return <code>${prefix}${count.value} — ${message.value}${suffix}</code>
}
})</p><p>// 使用时
console.log(getFormatted()('【', '】')) // 【5 — hello】
说明：
- 外层
computed跟踪count和message的变化； - 内层函数是闭包，能访问当前响应式状态；
- 每次
count或message变化，getFormatted会重新求值，返回一个新函数（确保结果最新）； - 调用
getFormatted()(...)时，实际执行的是最新生成的函数。
⚠️ 常见误区与注意事项
✘ 不要这样写（失去响应性）：
const getBad = computed(() => {
return (x) => x * count.value // ❌ count.value 在这里读取，但外层 computed 没有依赖它！
})
原因：箭头函数内部读取了 count.value，但 computed 的依赖收集发生在函数体执行时——而你返回的是函数，并没立即执行，导致 Vue 不知道要追踪 count。
✅ 正确做法：所有响应式依赖必须在外层函数体内显式读取。
再看一个带条件逻辑的例子：
const user = reactive({ name: 'Alice', role: 'admin' })
<p>const canDo = computed(() => {
const { role } = user // ✅ 显式读取，触发依赖收集
return (action) => {
const rules = { edit: ['admin', 'editor'], delete: ['admin'] }
return rules[action]?.includes(role) ?? false
}
})</p><p>// 使用
console.log(canDo()('edit')) // true
console.log(canDo()('delete')) // true
适用场景与优势
这种模式特别适合：
- 需要根据参数动态过滤或映射响应式列表（如
filterByStatus(status)）； - 封装带上下文的格式化逻辑（如日期、金额、i18n 翻译）；
- 替代多个冗余的计算属性（比如
isAllowedEdit、isAllowedDelete… → 统一为can('edit')）； - 与组件 props 结合，在 setup 中提前绑定部分参数（类似柯里化）。
注意：如果函数逻辑复杂或频繁调用，建议配合 memoize 或内部缓存（谨慎使用，避免内存泄漏），但多数业务场景无需额外优化。
