【Vue知识点总结】Watch（监听器）

目录

一、 Watch 与 Computed 的抉择

二、 从简写到对象：handler

1. handler 登场

2. 常见踩坑：简写与对象写的混淆

3. 冷门小技巧：字符串方法名

三、 进阶之路：三大核心配置项

1. deep（深度监听）：潜入对象内部

2. immediate（立即执行）：出生即巅峰

3. flush（执行时机）：控制回调的舞台

四、 企业级实战：Watch 在真实业务中的闪光点

场景 1：搜索框防抖——告别频繁请求

场景 2：路由参数监听——复用组件的数据刷新

场景 3：复杂表单联动与重置

五、 Vue3 组合式 API 中的 Watch 变革

1. 结构更清爽：告别 handler

2. 监听多个数据源

3. WatchEffect：自动收集依赖的魔法

六、 避坑指南：那些年我们踩过的 Watch 的坑

坑 1：深度监听对象的 newVal 与 oldVal 相同

坑 2：监听 Props 的变化

坑 3：异步创建的 Watch 导致内存泄漏

七、 总结

在前端开发中，数据驱动视图是 Vue.js 的核心思想。大多数情况下，我们通过 computed（计算属性）就能完成数据的派生和响应。但在某些场景下，我们需要在数据变化时执行异步操作或开销较大的操作，这时 computed 就显得力不从心了，需要 watch（监听器）。

一、 Watch 与 Computed 的抉择

在进入高级用法之前，我们必须明确 watch 和 computed 的边界：

• Computed（计算属性）：强调派生。必须要有返回值，基于响应式依赖进行缓存，适合多对一的数据转换。
• Watch（监听器）：强调响应副作用