Vue全局状态需通过细粒度拆分、精准依赖绑定、区分数据类型及清理订阅来实现按需更新。如拆分为auth/profile等模块，用storeToRefs或computed精确订阅，对高频数据防抖，静态数据只读，及时清理watch避免内存泄漏。
Vue 全局状态本身不会自动“按需更新”——它默认是响应式的，但更新范围取决于你如何组织和访问状态。真正的按需更新，靠的不是全局状态库本身的功能，而是你对状态粒度、模块边界、读取方式和副作用控制的设计选择。
拆分状态粒度，避免大对象触发多余渲染
把所有用户信息塞进一个 user 对象里，再在多个组件中用 $store.state.user 或 store.user 整体读取，会导致只要其中任意字段变化（比如头像 URL 更新），所有用到该对象的组件都会重新计算和渲染。
- 改用模块化 + 细粒度 state：把登录态、基础资料、权限列表、偏好设置拆成独立模块（如
auth、profile、permission） - 在组件中只订阅真正需要的字段：Pinia 中用
store.$state或store.字段名直接访问；Vuex 中通过mapState显式列出所需 key，或用 getter 返回单个值 - 避免在模板中直接展开整个对象：比如不用
{{ $store.state.user }}，而用{{ user.name }}（配合 computed 或 setup 中的 store 引用）
用 computed / storeToRefs 精确绑定响应式依赖
全局状态库返回的对象默认是响应式的，但若在 setup 中直接解构赋值，会丢失响应性；若不加约束地全量引用，又可能扩大依赖追踪范围。
Ainative Vue Sdk
下载
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
- Piina 推荐用
storeToRefs：只对需要响应更新的字段建立 ref，其余字段可普通解构 - Vuex 在组合式 API 中，用
computed(() => store.state.xxx)而非store.state.xxx直接读取，确保 Vue 能正确收集依赖 - 复杂计算逻辑尽量移入 getter 或 computed，避免在模板中多次调用函数导致重复执行
区分状态用途：缓存型 vs 实时型，控制更新节奏
不是所有全局数据都需要“实时响应”。比如用户头像 URL 改变后，头像组件应立刻更新；但用户积分变动频繁时，若每增加 1 分就触发一次 UI 刷新，反而影响性能。
立即学习“前端免费学习笔记（深入）”；
- 对高频低敏感数据，可设防抖 getter（例如用
ref+watch+setTimeout缓存最新值，延迟同步到视图） - 对静态配置类数据（如菜单结构、系统常量），初始化后不再变更，可用
readonly包裹，避免被意外修改或触发不必要的响应追踪 - 异步操作结果（如搜索建议列表）适合用
action+state+getter三级分离，让组件只关心“当前展示什么”，不感知加载过程
主动清理无用订阅，防止内存泄漏与误触发
组件卸载时，若仍持有对全局状态的响应式引用（尤其是 watch 或 computed），可能导致状态更新时尝试更新已销毁的组件实例，引发警告甚至错误。
- 使用
watch监听 store 数据时，显式调用返回的 stop 函数（尤其在onBeforeUnmount中） - 避免在 setup 中创建闭包长期持有 store 实例或 state 引用，除非明确需要跨组件生命周期共享
- 路由级状态（如详情页参数）优先用
useRoute().params+ 本地data，而非写入全局 store，减少无关组件响应
