计算属性高效编写需确保依赖精准响应式、逻辑拆分、无副作用。只访问响应式字段，避免非响应式数据；分阶段提取 computed 以复用缓存；严禁异步或修改状态；必要时辅以 memoization。

计算属性（Computed）的高效编写核心在于依赖追踪精准、逻辑简洁、避免副作用。Vue 会基于响应式依赖自动缓存计算结果，只要依赖未变，多次访问不会重复执行函数——但这个机制只在“正确使用”时才真正生效。

确保依赖完全响应式且可被追踪

计算属性的缓存能力依赖 Vue 的响应式系统能否准确捕获所有依赖。如果读取了非响应式数据（如普通对象属性、外部变量、Date.now()、Math.random()），或通过非响应式方式访问（如 this.$data.xxx 或 this._data.xxx），Vue 就无法建立依赖关系，导致：

• 计算属性失去缓存，每次访问都重新执行
• 界面更新时意外跳过更新（因依赖未变化，但实际值已变）

✅ 正确做法：只访问 data、props、computed 中明确声明的响应式字段；避免在 computed 中调用非响应式方法（如 new Date()）；如需时间戳等动态值，应将其封装为响应式数据（例如用 ref + watch 更新）。

拆分复杂逻辑，避免单个 computed 承担过多职责

一个计算属性若同时处理过滤、排序、分页、格式化等多个环节，不仅难以复用、调试困难，还容易因某一小部分依赖变化（如当前页码更新），导致整个昂贵运算（如大数据排序）被重复触发。

• 将中间结果提取为独立的 computed，让 Vue 分别缓存各阶段输出
• 例如：先写 filteredList（依赖 searchQuery），再写 sortedList（依赖 filteredList 和 sortKey），最后写 pagedData（依赖 sortedList 和 page）
• 这样，仅 searchQuery 变化时，只有 filteredList 重算，sortedList 和 pagedData 复用缓存结果

谨慎使用 getter 中的副作用或异步操作

计算属性必须是纯函数：相同输入始终返回相同输出，且不修改外部状态。一旦在 computed getter 中发起 API 请求、修改 this.data、触发 $emit 或调用 console.log，就会破坏缓存逻辑，甚至引发无限循环或不可预测行为。

• API 请求请移至 methods 或 setup 中的 async 函数，配合 ref + await 控制状态
• 需要“按需加载”的场景，改用 v-if 控制组件渲染，或用 watch 监听依赖并主动更新 ref
• 调试时可用 console.log，但上线前建议移除或改用 Vue Devtools 查看依赖链

必要时用 memoization 辅助（少见但有效）

对于无法完全响应式化的场景（如接收函数参数、处理第三方不可控对象），可借助轻量 memoization 工具（如 lodash.memoize 或手写缓存 Map），但要注意手动管理缓存失效。

• 仅适用于计算开销极大且输入稳定（如字符串模板编译、大型数组去重）
• 需监听相关依赖变化，在 watch 中清除对应缓存项
• 优先考虑重构为响应式结构，memoization 是兜底方案，不是默认选择