核心是“精准订阅 + 惰性计算 + 模块隔离”：用 storetorefs 解构所需字段避免无效重渲染，getter 缓存派生值需依赖稳定，按业务域拆分 store 模块并动态注册，持久化仅限关键状态且限定 paths。
核心是“精准订阅 + 惰性计算 + 模块隔离”：避免全局状态变更牵连无关组件，用 storeToRefs 解构所需字段，通过 getters 缓存派生值，并按业务域拆分 Store 模块。
只响应真正需要的状态
组件不应监听整个 Store 实例。使用 storeToRefs 显式解构关心的字段，可防止其他状态变化触发重渲染：
- ✅ 正确写法：const { username, avatar } = storeToRefs(userStore)
- ❌ 避免写法：const state = userStore.$state（整块响应式代理）
- 对大型对象（如用户权限列表），配合
shallowRef或markRaw跳过深度响应式转换
让 getter 真正缓存起来
Getter 的缓存机制依赖其依赖项是否稳定。破坏缓存的行为会带来重复计算开销：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 不直接在 getter 中调用方法或访问非响应式外部变量
- 复杂逻辑拆成多个小 getter，例如：
hasPermission和allowedRoutes分开定义，再组合使用 - 高频读取但低频更新的数据（如系统配置），考虑用
computed包裹 getter 结果，进一步控制更新时机
模块化拆分与按需加载
单一 Store 容易成为性能热点。模块不是只为组织代码，更是为隔离响应式依赖链：
- 按功能划分独立 Store，如
useUserStore、useTabStore、usePermissionStore - 动态注册模块（
store.registerModule）适用于路由级模块，例如仅在进入“报表中心”时加载图表相关状态 - 模块间通信优先用 action 调用，避免跨模块直接读写 state；必要时用事件总线或组合式函数解耦
持久化与本地缓存策略
频繁读写 localStorage 本身有性能成本，且可能引发状态不一致：
- 只持久化关键状态（如 token、主题色、侧边栏折叠状态），避开实时变动的数据（如搜索关键词、临时表单）
- 用
vuex-persistedstate插件时限定paths，禁用自动同步整个模块 - 对静态配置类数据（如菜单结构、字典项），首次加载后
Object.freeze，彻底跳过响应式处理
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
