Vue3:watch和watchEffect详解

Vue3:watch和watchEffect详解1. watch显式监听精准控制1.1 基本用法1.2 监听多个数据源1.3 监听 reactive 对象或特定属性1.4 关键配置选项2. watchEffect自动追踪简洁高效2.1 基本用法2.2 核心特性2.3 清理副作用 (onInvalidate)3. watch vs watchEffect 核心对比4. 最佳实践与避坑指南4.1 何时选择 watch4.2 何时选择 watchEffect4.3 常见陷阱在 Vue 3 的组合式 APIComposition API中watch和watchEffect是处理副作用Side Effects和响应式数据监听的两个核心 API。虽然它们都用于在数据变化时执行逻辑但在依赖追踪方式、执行时机和使用场景上有显著区别。1. watch显式监听精准控制watch需要显式指定要监听的数据源。它默认是惰性执行的即只有在数据变化时才触发并且能够访问数据的新值和旧值。1.1 基本用法watch接收三个参数source监听源、callback回调函数、options配置选项。import{ref,watch}fromvueconstcountref(0)// 监听单个 refwatch(count,(newVal,oldVal){console.log(count 从${oldVal}变为${newVal})})1.2 监听多个数据源可以通过数组形式同时监听多个响应式数据。constfirstNameref(John)constlastNameref(Doe)watch([firstName,lastName],([newFirst,newLast],[oldFirst,oldLast]){console.log(姓名从${oldFirst}${oldLast}变为${newFirst}${newLast})})1.3 监听 reactive 对象或特定属性监听整个 reactive 对象默认情况下修改 reactive 对象的内部属性不会触发 watch除非开启 deep: true。监听特定属性推荐使用 getter 函数可以更精确地监听对象的某个属性且性能更好。import{reactive,watch}fromvueconststatereactive({name:Alice,age:25})// ❌ 错误写法直接监听 reactive 对象修改内部属性通常不触发除非 deepwatch(state,(newVal){...})// ✅ 推荐写法使用 getter 监听特定属性watch(()state.name,(newName,oldName){console.log(名字变了:${oldName}-${newName})})// ✅ 深度监听如果需要监听嵌套对象的所有变化watch(state,(newVal){...},{deep:true})1.4 关键配置选项immediate: true让回调在侦听器创建时立即执行一次。常用于初始化时根据当前值加载数据。deep: true开启深度监听适用于监听对象或数组内部深层属性的变化。注意性能开销较大。flush控制回调执行的时机 (pre,post,sync)。默认pre组件更新前post适合操作 DOM。2. watchEffect自动追踪简洁高效watchEffect会自动追踪回调函数内部使用的响应式依赖。它在创建时会立即执行一次以收集依赖 any之后当任何依赖发生变化时重新执行。2.1 基本用法无需指定监听源只需传入一个副作用函数。import{ref,watchEffect}fromvueconstcountref(0)constdoubleref(0)// 自动追踪 count.valuewatchEffect((){double.valuecount.value*2console.log(count 变化了当前双倍数:${double.value})})2.2 核心特性自动依赖收集函数内用到的所有响应式数据ref, reactive, computed都会自动成为依赖。立即执行默认在组件挂载或创建时立即运行一次用于初始化状态或执行初始副作用。无新旧值参数回调函数不接收参数只能访问当前的最新值。2.3 清理副作用 (onInvalidate)watchEffect提供了一个强大的清理机制用于在处理异步请求、定时器等场景时避免内存泄漏或竞态条件。import{ref,watchEffect}fromvueconstsearchQueryref()constresultsref([])watchEffect((onInvalidate){constquerysearchQuery.valueif(!query){results.value[]return}//模拟异步请求letignoredfalsefetch(/api/search?q${query}).then(resres.json()).then(data{if(!ignored){results.valuedata}})// 清理函数在下一次执行前或停止监听时调用onInvalidate((){ignoredtrue// 取消之前的请求结果处理// 或者 clearTimeout(timer)// 或者 abortController.abort()})})3. watch vs watchEffect 核心对比特性watchwatchEffect依赖追踪显式必须指定监听源隐式自动追踪函数内使用的响应式数据执行时机惰性默认数据变化时才执行立即创建时立即执行一次以收集依赖新旧值访问支持回调接收(newVal, oldVal)不支持只能访问当前最新值适用场景1. 需要对比新旧值2. 监听特定数据源不想执行无关逻辑3. 节流/防抖异步请求4. 需要在数据变化后执行特定操作1. 同步多个状态如表单验证2. 简单的副作用如修改 document.title3. 依赖关系复杂或动态变化的场景4. 初始化时需要立即执行的逻辑性能考量更精准只监听指定源避免不必要的重跑若函数体内依赖过多任何依赖变化都会重跑整个函数4. 最佳实践与避坑指南4.1 何时选择 watch当你需要知道数据是怎么变的新旧值对比。当你只想在特定数据变化时执行逻辑而不希望其他无关响应式数据的变化触发回调。处理异步操作且需要防抖/节流时配合immediate和手动控制。监听props或route的变化并执行一次性副作用。4.2 何时选择 watchEffect逻辑依赖于多个响应式状态且这些状态共同决定一个结果。代码逻辑简单主要是为了同步状态或执行简单的 DOM 操作。希望代码更简洁不想手动维护依赖列表。需要在组件初始化时立即执行某些逻辑如根据初始路由加载数据。4.3 常见陷阱watchEffect 中的异步依赖丢失watchEffect只能追踪同步执行期间访问的响应式数据。如果在异步回调如setTimeout或Promise.then中访问响应式数据这些数据不会被追踪为依赖。// ❌ 错误id 在异步回调中访问不会被追踪watchEffect(async(){constdataawaitfetchData(id.value)// id 的变化不会触发重跑})// ✅ 正确在同步部分访问 idwatchEffect((){constcurrentIdid.value// 同步访问建立依赖fetchData(currentId).then(...)})watch 监听 reactive 对象的误区直接监听reactive对象本身修改其内部属性通常不会触发回调除非使用{ deep: true }。推荐做法是使用 getter 函数监听具体属性watch(() obj.prop, ...)。无限循环风险在watch或watchEffect中修改了被监听的数据可能导致无限循环。务必确保逻辑中有终止条件或避免修改依赖源。总结选watch当你需要精确控制监听谁、需要新旧值、或者进行异步防抖时。选watchEffect当你想要自动追踪依赖、逻辑简单、或者需要立即执行初始化副作用时。在实际开发中两者常互补使用。对于复杂的业务逻辑通常优先使用watch以获得更好的可预测性和性能控制对于简单的状态同步或 UI 副作用watchEffect能显著减少样板代码。