第44篇：Vue3侦听器完全精讲——watch与watchEffect区别、深度监听、异步业务落地
前言
上一篇我们学了computed 计算属性：适合同步、纯计算、派生数据。
但真实项目中大量场景需要：数据变化后执行异步操作。
比如：
搜索框关键词变化 → 重新请求接口
表单选项切换 → 联动加载不同数据
用户信息改变 → 本地持久化存储
这些有副作用、有异步、有业务逻辑的场景，必须用侦听器 watch / watchEffect。
本篇带你彻底吃透两种监听写法、区别、深度监听、立即执行、项目落地规范。
一、watch 基础监听（精准监听）
watch：精准监听指定数据，数据变化触发回调，可以获取新值、旧值。
<script setup> import { ref, watch } from 'vue' const searchKey = ref('') // 监听关键词变化 watch(searchKey, (newVal, oldVal) => { console.log('新值：', newVal) console.log('旧值：', oldVal) // 数据变化后执行搜索请求 }) </script>
二、watch 两大常用配置
1. immediate 立即执行
默认首次挂载不执行，设置 immediate: true 页面初始化立刻执行一次。
2. deep 深度监听
针对对象、数组，开启深度监听内部属性变化。
const user = reactive({ name: '', age: 0 }) watch(user, (newVal) => { console.log('用户信息变化', newVal) }, { immediate: true, deep: true })
三、精准监听对象单个属性（最优性能）
不推荐直接监听整个对象（性能差），精准监听属性是企业规范。
watch(() => user.name, (newVal) => { console.log('用户名改变', newVal) })
四、watchEffect 自动依赖监听（高级写法）
watchEffect 无需指定监听源，自动收集内部依赖，依赖变化自动执行。
特点：
默认立即执行
自动收集依赖，写法极简
无法获取旧值
watchEffect(() => { // 自动监听 searchKey 变化 console.log('搜索关键词：', searchKey.value) })
五、watch vs watchEffect（面试必背区别）
特性 | watch | watchEffect |
|---|---|---|
监听来源 | 手动指定 | 自动收集依赖 |
初始执行 | 默认不执行，需immediate | 默认立即执行 |
新旧值 | 可获取 | 无法获取旧值 |
适用场景 | 精准监听、需要旧值、复杂配置 | 简化代码、自动依赖、初始化逻辑 |
六、项目实战：搜索防抖+接口请求（高级落地）
结合之前手写防抖，实现企业标准搜索功能。
const getSearchData = debounce(async (key) => { // 模拟接口请求 console.log('请求搜索接口：', key) }, 500) watch(searchKey, (val) => { if(val) getSearchData(val) })
七、监听销毁（性能优化）
watch、watchEffect 会返回销毁函数，组件卸载手动关闭监听，杜绝内存泄漏。
const stopWatch = watch(searchKey, callback) onUnmounted(() => { stopWatch() })
八、computed vs watch 终极选型规范（必背）
只做数据计算、同步派生、需要缓存 → computed
需要异步、需要副作用、数据变化触发行为 → watch
九、本篇结语
computed + watch 构成了 Vue3完整响应式数据处理体系。
到这里，你已经掌握：模板语法、组件通信、组合式API、生命周期、计算属性、侦听器。
Vue3 核心基础全部通关，完全可以独立开发标准 Vue 项目。