computed可通过返回高阶函数实现参数化调用，外层负责响应式依赖收集与缓存，内层闭包持有最新状态；需在外层getter中显式读取响应式数据以确保追踪。
Computed 本身不能直接接收参数，但可以通过让它返回一个高阶函数（即“函数返回函数”）来实现参数化调用。这种方式既保留了 computed 的响应式缓存优势，又支持动态传参，是 Vue 2 和 Vue 3 中稳定、推荐的实践方案。
核心原理：闭包捕获最新响应式状态
computed 的 getter 函数会在依赖变化时重新执行；只要在其中显式读取响应式数据（如 ref.value 或 reactive 属性），Vue 就能追踪依赖。返回的内层函数作为闭包，自然持有当前最新的响应式值，调用时直接使用即可。
- 外层 computed 负责响应式依赖收集和缓存更新时机
- 内层函数不参与依赖收集，只负责按需计算，避免重复定义多个相似逻辑
- 每次依赖变更，computed 会生成一个新函数，确保结果始终基于最新状态
基础写法：返回单参数函数
适用于根据 key 取值、格式化字符串、简单条件判断等场景：
const obj = ref({ a: 10, b: 20, c: 30 })const getValue = computed(() => (key) => obj.value[key])- 模板中：
{{ getValue('b') }}→ 渲染 20；修改obj.value.b = 25后自动更新为 25
进阶写法：支持多参数与默认值
适合带过滤、默认回退、组合逻辑的业务场景：
示例：查找用户并提供 fallbackconst users = ref([{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }])const findUser = computed(() => (id, fallback = null) => users.value.find(u => u.id === id) ?? fallback)- 调用：
findUser()(1)返回 Alice；findUser()(999, 'Not found')返回 'Not found'
注意事项：避免丢失响应性
常见错误是把响应式读取写在内层函数里，导致 Vue 无法追踪：
- ❌ 错误：
computed(() => (x) => x * count.value)——count.value在内层读取，外层未触发依赖收集 - ✅ 正确：
computed(() => { const val = count.value; return (x) => x * val })—— 外层显式读取，保证响应式链完整 - 所有用到的响应式数据（ref、reactive 属性、props 等）必须在外层 getter 中直接访问
