vue 的 watch 默认浅监听且仅在数据变化后触发，需用 immediate 实现初始化时立即执行、deep 实现深层属性监听，二者组合常用于表单校验等场景。
Vue 的 watch 默认只在数据**变化后**触发，且仅响应对象引用是否被替换（浅监听）。要让它“一上来就干活”或“钻进对象里盯住每个字段”，就得靠 immediate 和 deep 这两个关键配置项——它们不是锦上添花的修饰，而是解决具体问题的实用开关。
immediate：让监听器开机即用
当组件挂载、响应式数据已就绪，但还没发生任何修改时，你仍希望立刻执行一次逻辑，比如拉取初始数据、校验表单、同步状态，immediate: true 就是为此设计的。
- 搜索页根据 URL 参数
keyword自动发起首次请求，不用等用户敲字 - 权限组件根据传入的
role立即加载对应菜单和按钮权限 - 编辑弹窗打开时，基于初始
formModel触发一次完整校验，展示默认错误提示
注意：首次执行时，oldValue 是 undefined，回调中需做兼容判断；若逻辑含 DOM 操作或异步请求，也需评估是否真有必要立即执行。
deep：让监听器穿透对象每一层
Vue 默认只监听对象/数组的引用是否被替换。如果你改的是 user.address.city，而 watch 的是 user，不加 deep 就完全收不到通知。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 监听整个表单对象（如
formModel），任意字段（包括tags[0].name或profile.phone）改动都触发校验 - 监控配置项对象（如
chartOptions），任一嵌套属性变更都重绘图表 - 处理树形结构数据（如
menuTree），节点增删或属性更新都能被捕获
⚠️ 深度监听会递归遍历所有属性建立依赖，性能开销明显。不要对大型对象盲目开启；若只需关注某一个嵌套字段（如 user.email），直接写 watch(() => user.email, ...) 更高效、更精准。
immediate + deep：表单场景的黄金组合
很多真实业务需要“第一次就校验 + 后续任何修改都响应”，这时两个参数一起上，代码简洁且语义清晰。
- 用户编辑弹窗：props 传入
user对象，打开即显示初始校验结果（immediate） - 用户修改姓名、地址、偏好设置等任意深层字段，实时更新错误状态（
deep） - 写法示例：
watch: { user: { handler() { this.validateForm() }, immediate: true, deep: true } }
这比在 mounted 里手动调一次校验 + 单独写个深度 watch 更统一、更少出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
