vue 的 watch 用于监听响应式数据变化并执行副作用，支持监听 ref、reactive 对象、多个源及 computed，需注意 deep、immediate、flush 等配置以优化性能与时机。
Vue 中的 watch 函数是监听响应式数据变化的核心工具，适用于需要在数据变更时执行副作用（如发请求、更新 DOM、存 localStorage 等）的场景。它不用于模板渲染逻辑（那是 computed 的职责），而是专注“响应变化、触发动作”。用法清晰但细节关键，尤其要注意监听源类型、深度与时机控制。
监听 ref 或基本响应式变量
这是最常见也最直接的方式。只要传入一个 ref，watch 就能自动追踪其 .value 变化，并在回调中拿到新旧值：
-
watch(count, (newVal, oldVal) => { ... })—— 直接监听ref，无需写.value - 回调参数顺序固定：第一个是新值，第二个是旧值（首次触发时旧值为
undefined） - 适用于字符串、数字、布尔等基本类型，也适用于简单对象（但仅检测引用变化）
监听 reactive 对象或深层属性
对 reactive 对象，默认只监听对象引用本身；内部属性修改（如 user.name = 'Tom'）不会触发。需配合 deep: true 或使用 getter 函数：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用 getter 函数监听特定路径更推荐：
watch(() => user.name, (newName) => {...})—— 精准、高效、无需 deep - 若必须监听整个对象变化（如判断是否“整体重置”），才启用
deep: true：watch(user, callback, { deep: true }) - 注意：
deep: true会带来性能开销，避免滥用；数组 push/pop 也需 deep 才能捕获
监听多个数据源或计算属性
支持同时监听多个响应式源，回调参数按顺序一一对应：
- 监听多个
ref：watch([count, name], ([newC, newN], [oldC, oldN]) => {...}) - 监听
computed属性（本质也是响应式）：watch(fullName, (newVal) => {...})，依赖变化时自动触发 - 监听路由、props 等外部响应式对象，统一用 getter：
watch(() => route.query.id, id => {...})
常用配置项：immediate 和 flush
两个高频选项让监听更灵活：
-
immediate: true—— 组件初始化时立即执行一次回调，适合需要“初始加载+后续响应”的场景（如页面打开即查缓存并监听后续变更） -
flush: 'post'—— 确保回调在 DOM 更新后执行，适合需要操作最新渲染节点的操作（如 focus input、滚动定位）；默认'pre'（DOM 更新前） -
deep和immediate可组合使用，但注意 deep + immediate 时旧值仍为undefined
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
