博客

Vue 3 中的 watch、watchEffect、watchPostEffect 和 watchSyncEffect 都是用于监视响应式数据变化的 API，但它们之间有一些区别，下面详细介绍它们的使用方法和不同之处。

watch

watch 是 Vue 2 中的 API，Vue 3 中也保留了这个 API。它是一个侦听器，可以用于侦听单个变量或对象的属性，可以传入一个回调函数，在值变化时执行该函数。

watch(() => count.value, (newValue, oldValue) => {
  console.log(`count 值从 ${oldValue} 变为 ${newValue}`)
})

上面的代码使用了 watch API 监听了 count 变量的变化，当 count 的值发生变化时，控制台就会输出新旧值。

watchEffect

watchEffect 是 Vue 3 中新增的 API，它接受一个函数作为参数，会自动执行这个函数，并在函数执行过程中收集函数所依赖的响应式数据。如果在函数执行过程中访问了某个响应式数据，那么当这个响应式数据发生变化时，watchEffect 会自动重新执行该函数。watchEffect 的回调函数没有传递新值和旧值的参数。

const count = ref(0)
watchEffect(() => {
  console.log(`count 值为 ${count.value}`)
})

上面的代码使用了 watchEffect API 监听了 count 变量的变化，并在回调函数中打印出 count 的值。

watchPostEffect

watchPostEffect 也是 Vue 3 中新增的 API，它接受一个函数作为参数，和 watchEffect 类似，会自动执行这个函数，并在函数执行过程中收集函数所依赖的响应式数据。但是和 watchEffect 不同的是，watchPostEffect 会在函数执行结束后再次执行一次，这次执行没有任何的依赖追踪。

const count = ref(0)
watchPostEffect(() => {
  console.log(`count 值为 ${count.value}`)
})

上面的代码使用了 watchPostEffect API 监听了 count 变量的变化，并在回调函数中打印出 count 的值。和 watchEffect 不同的是，watchPostEffect 会在函数执行结束后再次执行一次。

watchSyncEffect

watchSyncEffect 也是 Vue 3 中新增的 API，它接受一个函数作为参数，和 watchEffect 类似，会自动执行这个函数，并在函数执行过程中收集函数所依赖的响应式数据。但是和 watchEffect 不同的是，watchSyncEffect 会立即执行一次回调函数，而不是等到下一个事件循环才执行。

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup lang="ts">
import { ref, watchSyncEffect } from "vue"

const count = ref(0)

const increment = () => {
  count.value++
}

watchSyncEffect(() => {
  console.log(`Count is now ${count.value}`)
})
</script>

</script>