getter嵌套本身不直接导致性能问题，但不当使用会破坏缓存、增加依赖收集开销、加剧深层响应式拦截负担，并与组件computed混用引发隐性开销。
Vue 状态管理中 Getter 嵌套本身不会直接引发性能问题，但不当的嵌套方式会破坏缓存机制、增加计算负担，甚至导致响应式链路变长，最终拖慢渲染和状态更新速度。
Getter 嵌套破坏缓存逻辑
Getter 的缓存依赖于其依赖的状态是否变化。一旦嵌套层级过深或内部调用其他 getter 时引入非响应式中间值（如手动解构、临时对象、函数返回未响应式结构），Vue 就无法正确追踪依赖，导致每次访问都重新执行计算。
- 错误写法：
getters: { userSummary: state => ({ name: state.user?.name || '', age: getAgeFromRaw(state.user) }) }——getAgeFromRaw是普通函数，不参与响应式追踪，整个 getter 失去缓存能力 - 正确做法：把
getAgeFromRaw拆为独立 getter，并在userSummary中显式引用getters.userAge，确保所有依赖可被 Vue 捕获
深层嵌套触发冗余依赖收集
当一个 getter A 调用 getter B，B 又调用 C，而 C 依赖了某个深层 state 属性（如 state.config.theme.colors.primary），那么 A 的每次读取都会触发三层依赖注册。组件哪怕只用到 A，也会因 C 的响应式路径过长而增加初始化开销。
- 尤其在大型模块中，多个 getter 形成“调用网”，会让 store 初始化变慢、devtools 调试变卡
- 建议限制 getter 调用深度 ≤2 层；超过时考虑用组合式逻辑（如在组件内用
computed(() => useStore().getters.xxx)分层消费）
嵌套 getter + 非扁平 state 结构加剧性能损耗
如果 state 本身是深度嵌套对象（如树形菜单、多级表单配置），再配合嵌套 getter 过滤/映射，很容易触发 Proxy 的深层 trap，造成大量 get 拦截调用。Vue 3 的响应式系统虽比 Vue 2 更高效，但仍需避免“读一次、查十层”。
- 典型场景：表格页使用
getters.filteredAndSortedRows，而该 getter 内部又调用getters.activeFilters和getters.rawData，两者都基于深层嵌套 state - 优化方向：对高频使用的嵌套数据做预处理，例如在 mutation 中就将
rawData扁平化为索引结构，或用shallowRef+ 手动更新控制响应范围
与组件 computed 混用时的隐性开销
开发者常在组件里写 computed(() => store.getters.nestedUserDetail)，看似合理，但如果这个 getter 本身已含复杂逻辑，再加上组件自身 computed 的二次封装，就形成双重缓存+双重依赖链，反而不如把逻辑下沉到单一 getter 中并直接绑定模板。
- 避免：组件内反复包装 store getter，比如
const fullName = computed(() => store.getters.userProfile?.name + ' ' + store.getters.userProfile?.suffix) - 推荐：在 store 中定义
fullName: (state, getters) => getters.userProfile?.name + ' ' + getters.userProfile?.suffix，组件直接用mapGetters(['fullName'])
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
