Vue 3 中的侦听器和副作用函数对比

在 Vue 3 开发中，watch 和 watchEffect 是两种常用的响应式副作用工具。虽然它们都能监听数据变化并执行回调，但使用场景、触发时机、性能特性等方面存在显著差异。下面内容将方便你了解两者区别，并在实际项目中做出最合适的选择。

1️⃣ 什么是 Watch？按理说，

Watch 用于监听一个或多个响应式源的变化。并在变化时执行回调，它提供了诸如深度监听、立即执行、一次性触发等高级选项，能让你精细控制副作用的执行。

1.1 基本示例

export default {
data {
return {
question: '',answer: 'Questions usually contain a question mark.;-)',loading: false,};},watch: {
// 每执行
question {
if ) {
this.getAnswer;话说回来，}
},}，methods: {
async getAnswer {
this.loading = true;this.answer = 'Thinking…'，try {
const res = await fetch;this.answer = ).answer;} catch {
this.answer = 'Error!Could not reach API.' + error;} finally {
this.loading = false;}
},},}，

1.2 基本示例

1.3 Watch 的数据源类型

• 单个 ref / reactive 对象 / getter 函数： watch
• 多个来源组成的数组： watch => {})

痛点提醒：当你需要同时监控多个值时一定记得使用数组形式，否则只能监听第一个源。

2️⃣ 深度侦听器

默认情况下Watch 是浅层的，只在被赋新值时触发。若要捕获嵌套属性变化，需要开启 deep。

2.1 示例

export default{
watch:{
someObject:{
handler{
// newVal 与 oldVal 在对象内部变更时相同。仅整体替换会触发回调
},deep这方面，true,}
}
}

2.2 示例

const obj=reactive;watch=>{
// newVal 与旧值同一对象引用，内层变更会触发此回调
});obj.count++，

从注意来看。深度监听会遍历整个对象树，适用于小型对象；大结建立议改用 getter 或 computed，以避免性能瓶颈。

3️⃣ 即时执行与一次性触发

watch 默认懒执行，仅在首次数据变更后才调用； 若需要在创建时立即跑一次可设置 immediate:true；如果只关心第一次变化后立即运行，可设置 once:true。

即时执行示例

export default{
watch:{
question:{
handler{ /* ... */ },immediate:true。}
}
}

一次性触发示例

watch=>{
// 第一次变化后才会调用，此后停止侦听
},{once:true});

5️⃣ 副作用清理与竞态问题处理

watch 的回调可以接受第三个参数 onCleanup。用于在新的依赖变更前清理旧副作用，如 abort 请求或移除事件监听。

watch=>{
const controller=new AbortController;fetch.n=>{/*...*/});onCleanup=>controller.abort);})，

说到痛点。如果不手动清理过期请求，会导致 UI 显示错误数据或内存泄漏。

6️⃣ flush 与同步/后置刷新模式

• 'post': 在 Vue 更新 DOM 后再执行，适合读取更新后的 DOM。
• 'sync': 在任何响应式更新之前同步执行，可用于提前校验或防止无效操作。
• 'post'/<'sync'/> 的默认行为是依赖 Vue 的 scheduler 队列，而非同步 JavaScript 执行流。

watch=>{/.../},{flush:'post'});

watch=>{/.../},{flush:'sync'});

至于提示。默认 flush 为 'post'，如果你想立即获取更新后的 DOM，请显式指定。否则可能看到的是旧值对应的视图状态。

7️⃣ watchEffect 简介与使用场景

watchEffect 会自动追踪其回调中访问到的所有响应式属性，而且每当其中任何一个发生变化时就重新运行。它不需要手动指定源，也不支持深度或一次性等高级配置——这正是它“全自动”的优势所在。

javascript import { ref,watchEffect } from 'vue';

const todoId=ref;const data=ref;

watchEffect=>{ const response=await fetch;data.value=await response.json;})，不过，

从注意来看。异步逻辑中的 await 后访问不到的新属性不会被追踪；仅第一次 await 前访问到的属性会绑定依赖。如果想让新的字段也能自动更新，需要把相关属性提前写入响应式状态中或使用另一个 watch 来追踪它们。

8️⃣ Watch 与 WatchEffect 对比表