第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（面试必背区别）

六、项目实战：搜索防抖+接口请求（高级落地）

结合之前手写防抖，实现企业标准搜索功能。

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 项目。