从侦察到反应：Vue 3 中 watchEffect 的用法解析

Vue 3 中的 watchEffect

watchEffect 是 Vue 3 中引入的一个新 API，用于监听属性的变化。它与 watch 非常相似，但也有其独特之处。

• watchEffect 无法获取 oldValue。这意味着它不能用于跟踪属性的旧值。
• watchEffect 可以监听多个属性。这意味着它可以用于跟踪多个属性的变化，而无需编写多个 watch 函数。
• watchEffect 可以嵌套使用。这意味着它可以在其他 watchEffect 函数中使用，从而可以创建复杂的依赖关系。

watchEffect 与 watch 的区别

watchEffect 与 watch 有很多相似之处，但也有其独特之处。下表总结了这两个 API 之间的区别：

特性	watch	watchEffect
能否获取 oldValue	是	否
能否监听多个属性	否	是
能否嵌套使用	否	是

watchEffect 的最佳实践

为了充分利用 watchEffect，请遵循以下最佳实践：

• 使用 watchEffect 来监听那些您需要做出反应的属性。
• 避免在 watchEffect 中执行耗时的操作。
• 使用 watchEffect 来创建复杂的依赖关系。
• 嵌套使用 watchEffect 时，请注意避免循环依赖。

watchEffect 的使用示例

下面是一个使用 watchEffect 的示例：

import { watchEffect } from 'vue'

export default {
  setup() {
    const count = ref(0)

    watchEffect(() => {
      console.log(`Count is now ${count.value}`)
    })

    return {
      count
    }
  }
}

在这个示例中，我们使用 watchEffect 来监听 count 变量的变化。每当 count 变量发生变化时，watchEffect 函数就会被调用，并会将 count 的新值打印到控制台。

watchEffect 的总结

watchEffect 是 Vue 3 中的一个新 API，用于监听属性的变化。它与 watch 有很多相似之处，但也有其独特之处。watchEffect 无法获取 oldValue，但它可以监听多个属性，并且可以嵌套使用。

watchEffect 可以用于跟踪那些您需要做出反应的属性，例如表单输入值的变化。它还可以用于创建复杂的依赖关系，例如在一个组件中监听另一个组件的属性的变化。

为了充分利用 watchEffect，请遵循以下最佳实践：

• 使用 watchEffect 来监听那些您需要做出反应的属性。
• 避免在 watchEffect 中执行耗时的操作。
• 使用 watchEffect 来创建复杂的依赖关系。
• 嵌套使用 watchEffect 时，请注意避免循环依赖。