Vue 3 中 watch 必须监听 ref 或 reactive 创建的响应式数据，监听 ref 基本类型直接触发，监听对象需用 getter + deep: true 或抽字段；监听 reactive 必须用 getter 函数；多源监听支持数组；注意 immediate、deep 性能及无限循环问题。
在 Vue 3 单文件组件（SFC）中，watch 用于响应式地监听组件内部状态变化，关键在于：必须监听响应式数据源（ref 或 reactive 创建的变量），且写法要符合 Composition API 的规则。直接监听普通变量或错误包装会导致监听失效。
监听 ref 定义的基本类型或对象
这是最常见、最直观的方式。ref 包裹的值本身就是响应式引用，可直接传入 watch：
- 监听基本类型（如 number、string）：无需额外配置，值一变就触发
- 监听 ref 包裹的对象：默认只响应“整个对象被替换”，不响应内部属性修改（例如
user.value.name = '新名字'不会触发） - 若需响应对象内部变化，有两种选择：
① 改用watch(() => user.value, ..., { deep: true })；
② 更推荐——把关心的字段单独抽出来监听，比如watch(() => user.value.email, ...)
监听 reactive 对象的特定字段
对 reactive 创建的对象，不能直接传入 watch（否则失去响应性或 oldValue 不可靠），必须用 getter 函数包裹：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- ✅ 正确：
watch(() => state.profile.city, (newCity, oldCity) => {...}) - ✅ 监听整个对象深层变化：
watch(() => state, callback, { deep: true }) - ❌ 错误：
watch(state, callback)—— 这种写法在 Vue 3 中无法正确追踪嵌套变更，也不保证 oldValue 有效
监听多个状态或组合条件
当逻辑依赖多个响应式来源时，可以把它们放进数组里统一监听：
- 支持混合类型：比如
[count, searchQuery, () => route.params.id] - 回调函数接收两个数组参数：
([newCount, newQuery, newId], [oldCount, oldQuery, oldId]) - 适合做联动校验、条件聚合更新等场景，例如“只有搜索词和页码都变了才重新请求列表”
常用配置与避坑要点
watch 的 options 参数能显著提升实用性，但几个细节容易出错：
- immediate: true：让回调在组件初始化时立即执行一次，适合首次加载需同步处理的逻辑（如根据初始值设置 UI 状态）
- deep: true：仅对 getter 函数生效，且只在真正需要监听任意嵌套层级时启用；数组大或结构深时慎用，影响性能
-
避免无限循环：不要在 watch 回调里直接修改被监听的变量本身（如监听
count，又在回调里执行count.value++） -
undefined 守卫：初始化时某些值可能为
undefined，建议在 handler 开头加判断，防止后续逻辑报错
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
