watch可监听ref或reactive数据：监听ref直接传入变量；监听reactive整体默认深度响应；监听其某属性需用getter函数；支持immediate和deep等配置。
直接传入 ref 或 reactive 数据源，配合回调函数即可监听单个响应式数据变化。
监听 ref 类型的数据
ref 是最常见、最直观的监听对象。watch 接收 ref 变量本身（不加 .value），回调会自动拿到新旧值：
- 定义
const count = ref(0) - 调用
watch(count, (newVal, oldVal) => { ... }) - 修改时只需
count.value++，回调立即触发
监听 reactive 对象整体
若监听整个 reactive 对象（包括任意嵌套属性变化），可直接传入该对象，Vue 3 会自动深度响应：
Springboot Vue Builder
下载
从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。
- 定义
const user = reactive({ name: 'Alice', profile: { age: 25 } }) - 调用
watch(user, (newVal) => { ... })—— 注意：oldVal 和 newVal 指向同一引用，旧值不可靠 - 修改
user.profile.age = 26也会触发回调
监听 reactive 对象的某个属性
要精准监听某一个字段（如 user.name 或 user.profile.city），必须用 getter 函数包裹：
- 写成
watch(() => user.name, (newVal, oldVal) => { ... }) - 嵌套属性同理：
watch(() => user.profile.city, ...) - 这样能正确建立依赖追踪，避免监听失效
补充关键配置
按需添加 options 控制行为：
- immediate: true：组件初始化时立即执行一次回调（适合首次加载逻辑）
- deep: true：仅对 ref 包裹的对象/数组生效；reactive 对象整体监听默认已深度响应，无需额外加 deep
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
