应优先将跨组件复用、依赖全局状态、需缓存的纯计算逻辑提至 vuex/pinia getter；组件内computed适用于临时性、轻量级、仅本组件使用的转换。
选 Getter 还是组件内计算，关键看数据是否跨组件复用、是否依赖全局状态、是否需要缓存和响应式追踪。
数据是否在多个组件中被重复使用
如果同一份加工逻辑（比如“筛选出已完成的待办项”或“按分类聚合商品数量”）在 3 个以上组件里都出现，就该提进 Vuex 或 Pinia 的 getter。它天然支持共享、复用、集中维护。否则，每个组件自己写一遍 computed，不仅冗余，改一处还得同步多处。
- ✅ 提到 store：避免逻辑散落，便于统一调整过滤条件或格式规则
- ❌ 留在组件：适合临时性、一次性、仅本组件理解的转换（如仅用于渲染某个 Tooltip 的文案拼接）
转换是否依赖全局状态或模块间数据
当计算需要读取多个 state 字段、跨模块状态（比如 users + posts + permissions），或受路由参数、用户权限等全局变量影响时，组件内的 computed 很难干净地接入这些依赖，也容易导致响应式失效或手动 watch 复杂化。getter 在 store 层天然能访问完整 state 和其他 getters，且自动订阅依赖变化。
- ✅ 用 getter：例如 activeItems 依赖 lists[activeType] 和 items 对象，还受分页参数影响
- ❌ 组件内 hardcode：容易漏掉对 state.lists 变化的响应，或把路由参数从 props 一层层透传进来
性能敏感场景下是否需要缓存与懒执行
Getter 和组件内 computed 都有缓存机制——值不变就不重算。但 getter 的缓存作用域是整个 store 实例，多个组件读同一个 getter 共享结果；而组件内 computed 是各自独立缓存的。若某派生数据计算开销大（如遍历上千条记录做分组统计），又在多个地方高频读取，放 getter 能显著减少重复计算。
- ✅ 放 getter：高成本、多消费者、低频更新的派生数据（如报表汇总、树形结构扁平化）
- ❌ 组件内计算：轻量、单次使用、或需配合本地响应式数据（如搜索框输入实时过滤）
是否涉及副作用或主动操作
Getter 必须是纯函数：只读、无修改、无请求、无 DOM 操作。只要里面出现 this.$http、localStorage.setItem 或修改 state，就违背设计初衷。这类逻辑必须交给 methods 或 actions。组件内 computed 同样要保持纯净，但开发者更容易误写副作用——这时反而 getter 的约束性更强，能起到提醒作用。
- ✅ getter：只做映射、过滤、格式化、组合
- ❌ 别往里面塞：API 调用、日志打印、定时器、this.$router.push
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
