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