Vue3 中的 watch 和 watchEffect：如何优雅地监听数据变化

文章目录

• 前言
• [一、 watch](#一、 watch)
• • • 1.基本用法
    • 2.监听多个数据源
    • [3. 监听 reactive 对象](#3. 监听 reactive 对象)
    • 4.立即执行
    • 5.停止监听
• 二、watchEffect
• • • 1.基本用法
    • 2.自动追踪依赖
    • 3.停止监听
    • 4.清除副作用
• [三、watch 与 watchEffect 的区别](#三、watch 与 watchEffect 的区别)
• 四、选择指南
• 五、注意事项
• 总结

---

前言

在 Vue3 中，Composition API 引入了两个新的函数：watch 和 watchEffect，用于观察响应式数据的变化并执行副作用。它们有什么区别？如何在项目中正确使用？本文将结合示例详细讲解

---

一、 watch

watch用于监听一个或多个响应式数据源，并在数据源变化时执行回调函数。

1.基本用法

import { ref, watch } from 'vue'

const count = ref(0)

// 监听单个 ref
watch(count, (newValue, oldValue) => {
  console.log(`count 从 ${oldValue} 变为 ${newValue}`)
})

2.监听多个数据源

const count = ref(0)
const name = ref('Alice')

// 监听多个 ref
watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
  console.log(`count 从 ${oldCount} 变为 ${newCount}`)
  console.log(`name 从 ${oldName} 变为 ${newName}`)
})

3. 监听 reactive 对象

import { reactive, watch } from 'vue'

const state = reactive({ count: 0, name: 'Alice' })

// 监听整个 reactive 对象
watch(
  () => state, 
  (newValue, oldValue) => {
    // 注意：newValue 和 oldValue 是同一个对象，因为引用相同
    console.log('state 变化了', newValue.count)
  },
  { deep: true } // 需要深度监听
)

// 更好的方式：监听单个属性
watch(
  () => state.count,
  (newCount, oldCount) => {
    console.log(`state.count 从 ${oldCount} 变为 ${newCount}`)
  }
)

4.立即执行

默认情况下，watch 是惰性的，即第一次不会执行。可以通过配置 immediate: true 来立即执行。

watch(
  count,
  (newValue, oldValue) => {
    console.log(`count 是 ${newValue}`)
  },
  { immediate: true }
)

5.停止监听

watch 会返回一个停止函数，调用它可以停止监听。

const stop = watch(count, (newValue, oldValue) => {
  // ...
})

// 停止监听
stop()

二、watchEffect

watchEffect 会立即执行传入的函数，同时响应式地追踪其依赖，并在依赖变更时重新运行该函数。

1.基本用法

import { ref, watchEffect } from 'vue'

const count = ref(0)

watchEffect(() => {
  console.log(`count 的值是: ${count.value}`)
})

2.自动追踪依赖

watchEffect 会自动追踪函数内部使用的响应式变量，无需显式指定监听源。

const count = ref(0)
const name = ref('Alice')

watchEffect(() => {
  console.log(`count: ${count.value}, name: ${name.value}`)
  // 会自动追踪 count 和 name
})

3.停止监听

与 watch 一样，watchEffect 也返回一个停止函数。

const stop = watchEffect(() => {
  // ...
})

// 停止监听
stop()

4.清除副作用

有时副作用函数会执行一些异步操作，在重新执行或停止时，我们需要清除这些异步操作。watchEffect 提供了一个 onInvalidate 函数，用于注册清理回调。

watchEffect((onInvalidate) => {
  const timer = setTimeout(() => {
    console.log('异步操作', count.value)
  }, 1000)

  onInvalidate(() => {
    clearTimeout(timer)
  })
})

三、watch 与 watchEffect 的区别

特性	watch	watchEffect
执行时机	默认惰性，不会立即执行，需要 immediate: true	立即执行
依赖追踪	需要显式指定监听源	自动追踪函数内部使用的响应式变量
旧值	可以获取旧值	无法获取旧值
使用场景	需要知道旧值和新值，或需要精确控制监听源	不需要旧值，且依赖多个数据源，希望自动追踪

四、选择指南

使用 watch 当：

• 需要知道变化前的值（旧值）
• 只需要监听特定数据
• 需要控制监听时机（惰性执行）

使用 watchEffect 当：

• 依赖多个数据，不想手动声明
• 需要立即执行副作用
• 执行的操作与多个响应式数据相关

记住这个简单的选择原则：

• 需要旧值或精确控制？用 watch
• 立即执行且依赖多个数据？用 watchEffect

五、注意事项

• 避免在 watch 和 watchEffect 中修改依赖的数据，以免造成无限循环。
• 对于监听多个数据源，如果希望同步执行，可以使用 watch 的数组形式；如果依赖自动追踪，使用 watchEffect。
• 在组件卸载时，watch 和 watchEffect 会自动停止，除非你设置了 { flush: 'post' } 等选项。

总结

watch 和 watchEffect 都是 Vue3 中强大的响应式工具。watch 更适合需要明确监听源和旧值的场景，而 watchEffect 则更适合依赖多个数据源且不需要旧值的场景。