前言在 Vue 3 的 Composition API 中watch 和 watchEffect 是两个最常用的响应式监听工具。但在实际项目开发中很多开发者包括刚接触 Vue 3 的我常常在两者之间纠结到底该用哪个它们的底层执行机制有什么区别本文将结合我在项目中踩过的坑帮你彻底理清它们的用法和选择时机。核心区别按需监听 vs 自动追踪要搞懂它们的区别我们只需要记住一句话watch 是“你指哪我打哪”而 watchEffect 是“我自动帮你找目标”。watch显式声明精准打击watch 需要你明确指定要监听的数据源。只有当这个数据发生变化时回调函数才会执行。适用场景你需要知道“变化前”和“变化后”的值或者只想在某个特定变量改变时触发逻辑如路由参数变化时重新请求数据。import { ref, watch } from ‘vue’;const keyword ref(‘’);// 明确监听 keywordwatch(keyword, (newVal, oldVal) {console.log(搜索词从 ${oldVal} 变成了 ${newVal});fetchData(newVal);});2. watchEffect自动收集依赖即插即用watchEffect 不需要你指定数据源。它会在首次执行时自动追踪内部用到的所有响应式变量。只要其中任何一个变了它就会重新执行。适用场景你只关心“执行某个副作用”不关心具体是哪个变量变了也不需要旧值如自动同步状态到本地存储、自动发起网络请求。import{ref,watchEffect}fromvue;constuserIdref(1);consttokenref(abc);// 自动追踪 userId 和 tokenwatchEffect((){console.log(重新获取用户信息:,userId.value,token.value);fetchUserInfo(userId.value,token.value);});项目实战我踩过的坑与最佳实践坑点在 watchEffect 中误用异步回调watchEffect 只能同步收集依赖。如果你在异步回调如 setTimeout 或 Promise.then里读取响应式变量它是无法追踪到的// ❌ 错误示范watchEffect 不会监听 count 的变化watchEffect(() {setTimeout(() {console.log(count.value); // 依赖收集失败}, 1000);});// ✅ 正确做法在 watchEffect 外部同步读取或者改用 watchwatchEffect(() {const currentCount count.value; // 同步读取成功收集依赖setTimeout(() {console.log(currentCount);}, 1000);});坑点watchEffect 导致的无限循环 如果在 watchEffect 内部修改了它自己追踪的变量就会触发无限循环。// ❌ 危险操作watchEffect(() {list.value list.value.filter(item item.isActive);});总结一图流选择指南需要旧值 选 watch只监听单一/特定几个变量 选 watch初始化时需要立即执行一次 选 watchEffect (或 watch 加 { immediate: true })逻辑简单不想写一堆数据源 选 watchEffect
