第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面试必背区别特性watchwatchEffect监听来源手动指定自动收集依赖初始执行默认不执行需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 项目。