computed 自动追踪直接读取的响应式依赖，支持多变量联动；需避免动态访问、非响应式对象及副作用，复杂逻辑应分层拆解，异步操作须用 watch 或专用方案。

Vue 的 computed 可以自然地依赖多个响应式变量，只要它们在函数体内被直接读取，Vue 就会自动追踪依赖关系——不需要手动声明、也不用写数组列表。

依赖多个响应式数据，写法和单个一样

computed 本质是基于响应式依赖的“惰性求值函数”，只要你在返回值中用到了 data、props、其他 computed 或 store 中的响应式字段，它就会自动收集这些依赖：

• ✅ 正确示例（自动追踪 name 和 age）：

computed: {
  fullName() {
    return this.name + '（' + this.age + '岁）';
  }
}

只要 name 或 age 发生变化，fullName 就会重新计算。

避免隐式依赖失效的常见坑

以下写法会让 computed 失去响应性，需特别注意：

• ❌ 不要通过字符串拼接或动态 key 访问（如 this[objKey]），除非 objKey 本身是响应式且已明确依赖；
• ❌ 不要在 computed 内部调用未声明为响应式的普通对象属性（比如 const temp = { x: 1 }; return temp.x）；
• ❌ 避免在计算中使用非响应式第三方库状态（如 moment().format() 是纯函数调用，不触发更新）；
• ✅ 推荐：把外部逻辑封装成独立的响应式计算项，再组合使用。

复杂联动场景：用多个 computed 分层解耦

当涉及过滤、排序、分页等多步骤处理时，不要堆在一个 computed 里。拆分成小单元更易维护、复用、测试：

• filteredList：依赖 searchKeyword 和 list，只做筛选；
• sortedList：依赖 filteredList 和 sortBy，只做排序；
• pagedData：依赖 sortedList 和 currentPage，只做切片；

这样任意一环变化，只有真正受影响的后续项才会重算，性能更可控。

需要异步或副作用？考虑用 watch + data 替代

computed 必须是同步、无副作用的纯函数。如果联动逻辑涉及 API 请求、DOM 操作、定时器等：

• ❌ 不要放在 computed 里（会破坏响应式机制，也可能导致无限循环）；
• ✅ 改用 watch 监听多个源，执行异步操作并更新 data 字段；
• ✅ 或结合 asyncComputed（需额外插件）/ useAsync（组合式 API）实现异步计算语义。