vue3 响应式：vue3中的watchEffect与watch的区别解析

🔍 Vue3 | 响应式：watchEffect vs watch 区别解析

1. 核心机制

   • watchEffect：自动追踪依赖，立即执行回调函数，依赖变化时重新运行。🎯 无脑监听，适合副作用逻辑（如DOM操作、异步请求）。
   • watch：需显式指定监听的数据源，变化时触发回调。🕵️ 精准监听，适合需要新旧值对比的场景。

2. 依赖收集

   

   • watchEffect：自动收集回调内的响应式依赖（类似computed）。
   • watch：需手动传入监听目标（如() => state.value或[ref1, ref2]）。

3. 执行时机

   • watchEffect：默认同步执行（可通过flush: 'post'延迟到DOM更新后）。
   • watch：默认惰性（首次不执行，除非设immediate: true）。

4. 新旧值获取

   • watchEffect：❌ 无法直接获取旧值，需自行缓存（如let prev = ref()）。
   • watch：✅ 回调参数为(newVal, oldVal)，方便对比。

5. 停止监听

   

   • 两者均返回停止函数，调用即可取消监听：

     const stop = watchEffect(() => { ... });  
     stop(); // 🛑 停止监听

6. 性能优化

   • watchEffect：依赖变化频繁时可能重复执行，需注意副作用清理（如onInvalidate）。
   • watch：可搭配deep或throttle控制监听粒度。

💡 ：

• 用watchEffect当你是懒人🤖，想自动追踪依赖。
• 用watch当你是侦探🕵️，需精确控制监听目标与时机。
  参考Vue3官方文档及2025年社区最佳实践。）