Vue中实现组件对全局状态的按需监听，关键在于只响应关心的部分：通过Pinia等集中式状态管理，用storeToRefs解构所需字段或computed派生计算，避免全量响应式绑定；跨组件时各自主动监听关注字段；路由联动场景下监听store状态而非router对象。
Vue 中实现组件对全局状态的按需监听，关键不在于“监听所有”，而在于“只响应关心的部分”。这既避免性能浪费，也提升逻辑可维护性。核心思路是：用集中式状态管理（如 Pinia 或 Vuex）统一存储，再通过组合式 API 或计算属性，在具体组件中精准订阅所需字段。
用 Pinia 实现细粒度状态订阅
Pinia 是 Vue 3 官方推荐的状态管理库，天然支持响应式解构和按需使用。
- 定义 store 时明确划分模块，例如 userStore.js 只管用户信息，cartStore.js 只管购物车数据
- 在组件中不直接 import 整个 store，而是用
storeToRefs解构需要监听的响应式字段，其他字段不会触发更新 - 若只需读取、不修改，可搭配
computed(() => store.xxx)，比直接用 ref 更轻量
避免无意义的全局响应式绑定
常见误区是把整个 store 对象传给组件，或在 setup 中用 const store = useXXXStore() 后直接访问所有属性——这样哪怕只用到 store.name，只要 store.token 变了，组件也会重新执行渲染。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 正确做法：用
const { name, avatar } = storeToRefs(store)，仅让这两个字段成为响应式依赖 - 如果只是派生计算，比如“用户名是否为空”，写成
const isNameEmpty = computed(() => !store.name)，不触发 store 全量追踪 - 不建议在模板中写
{{ store.name }} {{ store.token }} {{ store.permissions }}，除非三者都真正参与视图逻辑
跨组件通信场景下的按需监听
当多个组件需响应同一状态变更，但各自关注点不同（如 A 组件只关心登录态，B 组件只关心权限变更），应隔离监听逻辑。
立即学习“前端免费学习笔记（深入）”；
- A 组件用
watch(() => userStore.isLogin, ...)监听布尔值变化 - B 组件用
watch(() => userStore.permissions, ..., { deep: true })深度监听权限数组 - 不共用同一个 watch，也不在父组件统一分发事件——每个组件自主决定监听什么、何时响应
配合路由做状态联动监听
某些全局状态需随路由切换自动更新或重置，比如页面标题、面包屑、当前菜单高亮项。
- 在路由守卫中调用 store 的 action，例如
router.beforeEach(... => { menuStore.setActiveKey(to.meta.key) }) - 组件内不主动监听
router.currentRoute，而是监听 menuStore.activeKey —— 这样更语义化，也便于测试和复用 - 若某组件只在特定路由下才需响应菜单变化，可在
onBeforeRouteEnter中注册 watch，离开时清除，避免内存泄漏
