Vue.js 的 watch 无法直接深度侦听 Vuex 模块整个状态对象，需通过 computed 暴露目标状态再配合 deep: true 监听；推荐使用 Vuex 4 的 store.watch API 实现更高效、精准的响应式监听。
Vue.js 的 watch 无法直接深度侦听 Vuex 中某个 Module 的整个状态对象，因为 Vuex 的 state 是响应式代理（通过 reactive 或 defineReactive 实现），但模块状态默认不被 Vue 组件自动追踪其深层变化——尤其当模块使用命名空间、或状态是嵌套对象/数组时，需显式配置才能触发侦听器。
必须使用 computed + watch 组合间接监听
不能直接 watch: { $store.state.moduleA }... 并期望深层属性变更触发回调。正确做法是：在组件中用 computed 暴露目标状态片段，再对该计算属性进行 watch，并启用 deep: true。
- 使用
mapState或箭头函数返回模块内嵌套数据，例如：computed: { ...mapState('moduleA', ['userInfo']), userInfoDetail() { return this.$store.state.moduleA.profile; } } - 对计算属性做深度监听：
watch: { userInfoDetail: { handler(newVal, oldVal) { /* 处理变化 */ }, deep: true, immediate: true } } - 注意：若
profile是 null 或 undefined，deep: true会失效，需确保初始值为响应式对象（如空对象{}）
模块开启 namespaced 后需完整路径访问
带命名空间的 module（namespaced: true）中，state 不再挂载到根 state，必须通过 $store.state.moduleA.xxx 访问。watch 时若漏写模块名，将监听一个 undefined，导致静默失败。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 错误示例：
watch: { 'profile': { deep: true } }→ 监听的是组件 data 中的 profile，不是 Vuex 的 - 正确方式：用函数形式监听，避免字符串路径歧义：
watch() { return this.$store.state.moduleA.settings; }, { deep: true } - 推荐配合
watchEffect（Vue 3）或watchSync（Pinia 风格思路），逻辑更直观
避免性能陷阱：只监听真正需要的字段
对整个 module state 做 deep: true 侦听，会在每次任意嵌套属性变更时触发，开销大且易误触发。应收敛监听粒度。
- 优先监听具体字段，如
this.$store.state.moduleA.form.errors，而非moduleA.form - 对数组变动敏感时，用
handler判断是新增、删除还是重排：if (Array.isArray(newVal) && newVal.length !== oldVal.length) { /* 数量变了 */ } - 必要时用
_.isEqual或JSON.stringify做值比对（仅限小数据），跳过无实质变化的回调
Vue 3 + Vuex 4 下的替代建议
Vuex 4 兼容 Vue 3，但响应式机制已升级。更推荐用 store.watch API 替代组件内 watch，它专为 Vuex 设计，支持精准路径和高效依赖收集。
- 直接在 setup 中调用：
store.watch( (state) => state.moduleA.config.theme, (newTheme) => { console.log('主题变了：', newTheme); } ) - 支持类似 computed 的响应式依赖，不依赖组件生命周期，销毁时自动清理
- 比组件级 watch 更轻量，且天然规避
deep性能问题（内部按需追踪）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
