Vue3 里怎么正确用watch监听Vuex？新手转场踩坑后，我整理了3种实用+1种进阶方案！

我去年帮公司重构后台管理系统时,从Vue2全家桶完全转Vue3 Composition API，一开始在watch监听Vuex这事儿上踩了整整三天的小坑——要么监听没反应，要么深度监听卡页面，要么拿到的旧值新值全一样，后来翻了Composition API的官方设计文档、找了社区里资深Vue开发者的开源项目拆解，才把这事儿彻底搞明白。

今天就用踩坑的真实经历当引子,给大家讲清楚Vue3 watch和Vuex的搭配逻辑，不管你是纯setup写法还是混用Options API，不管你用的是Pinia还是老版Vuex4（其实Vuex4和Pinia在Composition API里的watch逻辑大差不差，但Vuex4有个老坑Pinia基本解决了，后面会单独说），这篇文章里的内容都能用得上。

先搞懂前置问题：Vue3 watch的核心变化是啥？

很多新手转Vue3踩Vuex监听的坑,本质是没搞懂Vue2 watch和Vue3 Composition API里watch的本质区别，更没搞懂Vuex的响应式数据在Vue3 setup里的“身份”，所以先把这个前置问题讲透，后面的方案才不会死记硬背。

前置点1：Vue3 watch不再默认监听this上下文里的数据？

在Vue2 Options API里，我们写watch: { '$store.state.userInfo'(newVal, oldVal) {} }就能直接监听，本质是Vue2的watch是绑定在组件实例this上的，它会自动遍历this的属性、$data、$props、$store.state这些内部挂载的响应式对象。

但Vue3 Composition API里的setup函数是独立于组件实例的（虽然3.2以后能用