watchEffect 适合无感同步，因它立即执行并自动追踪 store 中响应式字段变化，确保回调内始终使用最新值；需直接读取 store 属性而非解构，避免响应链断裂。
在 Vue 3 中用 watchEffect 监听全局 Pinia 状态实现无感同步，关键不是“监听 store 本身”，而是让 watchEffect 自动追踪 store 中的响应式字段。Pinia 的 store 实例天然具备响应式能力，但直接解构或裸用属性可能破坏响应链——正确做法是直接在回调中读取 store 属性，由 watchEffect 自动捕获依赖。
为什么 watchEffect 更适合无感同步？
它默认立即执行一次，后续任一被读取的响应式值变化都会触发整个回调，所有变量都以最新值快照形式参与运算，无需手动管理新旧值配对。这种“读即追踪、变即重跑”的机制，天然契合状态同步场景，比如主题切换、用户登录态更新、购物车数量联动等。
基础写法：一行监听，自动响应
在组件的 <script setup></script> 中：
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
watchEffect(() => {
console.log('当前用户名:', userStore.name)
console.log('是否已登录:', userStore.isLoggedIn)
document.title = userStore.isLoggedIn ? `欢迎, ${userStore.name}` : '请登录'
})
立即学习“前端免费学习笔记（深入）”；
Element Plus Vue3 桌面组件库。在开发 Vue 3.x 页面时调用，使用 Element Plus 组件（如 el-button、el-input、el-form、el-table 等）。
只要 userStore.name 或 userStore.isLoggedIn 变更，回调就会重新运行，且始终拿到两个字段的最新值——这就是“无感同步”的核心体验。
进阶技巧：控制副作用生命周期
实际项目中常需防抖、清理异步请求、避免重复渲染等。watchEffect 支持传入 onInvalidate 参数，在下一次执行前自动调用清理逻辑：
- 用
onInvalidate取消未完成的请求或定时器 - 配合
{ flush: 'post' }确保 DOM 更新后再执行（例如操作 ref 元素尺寸） - 返回的 stop 函数可用于组件卸载时手动停止监听（尤其在非 setup 场景或动态注册时）
避坑要点：别让响应链断掉
以下写法会导致监听失效或行为异常：
- 把 store 属性提前解构：
const { name } = userStore→ 后续读name不再响应 - 在条件分支里才访问字段：
if (userStore.isLoggedIn) doSomething(userStore.token)→token仅在登录时被追踪 - 监听 reactive 对象却只读对象本身：
console.log(userStore.profile)→ 应访问具体属性如userStore.profile.avatar
不复杂但容易忽略。
