【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(监听器):强调响应副作用
