Vue3开发者必知：Watch和WatchEffect的区别，让你少掉坑多获快乐！

作为一名 Vue.js 开发者，你肯定会熟悉 watch 和 watchEffect 这两个常用API。但是，你知道它们之间的区别吗？如果不知道，别担心！本篇博客将为你详细解释这两个API的区别，并提供一些使用建议。

相似性

首先，让我们来看一下这两个API的相似之处。

监听数据变化

watch 和 watchEffect 都可以用于监听Vue实例中的数据变化。当被监听的数据发生变化时，它们都能够执行某些逻辑，例如更新DOM、发送网络请求等。

使用方式

watch 和 watchEffect 都需要传递一个函数作为第一个参数，该函数将在被监听的数据发生变化时被调用。这个函数接收两个参数：新值和旧值。

好的，下面为大家提供一些watch和watchEffect的代码示例：

watch

// 监听单个属性的变化
watch('count', (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})

// 监听对象属性的变化
const state = reactive({
  count: 0,
  message: 'Hello'
})
watch(() => state.count, (newVal, oldVal) => {
  console.log(`Count changed from ${oldVal} to ${newVal}`)
})

watchEffect

// 立即执行并追踪所有响应式数据变化
watchEffect(() => {
  console.log(`Count is now ${state.count}.`)
  console.log(`Message is now "${state.message}".`)
})

// 仅追踪指定响应式数据变化
watchEffect(() => {
  console.log(`Count is now ${state.count}.`)
}, { flush: 'post' })

区别

现在，让我们来看看这两个API的区别。

响应式追踪

Vue 3引入了一个新的响应式系统，它使用了一种称为“响应式追踪”的技术，以便更好地对数据进行追踪。 watch 和 watchEffect 都利用这个系统来追踪数据变化。

watch 使用的是基于属性的追踪，这意味着它只会追踪被监听的属性。如果被监听的属性是一个对象，那么只有当该对象的属性发生变化时，watch 才会执行回调函数。

watchEffect 则使用了更为高级的基于函数的追踪。这意味着它可以追踪函数内部所涉及到的所有响应式数据，并在这些数据发生变化时自动执行回调函数。这使得 watchEffect 非常适合处理与多个响应式数据相关的逻辑。

延迟计算

watch API是惰性计算的，也就是说，它只有在监听的属性改变后才会执行回调函数。这样做可以节省计算资源并提高性能。但是，如果你需要在组件挂载时立即执行一些逻辑，那么可能需要另外写一些代码来实现。

相反，watchEffect 是立即计算的，也就是说，它会在创建时立即执行一次，并在其中涉及到的响应式数据变化时再次执行。这使得它非常适合用于立即执行的逻辑。

使用建议

现在您已经知道了 watch 和 watchEffect 之间的区别，那么该如何选择应该使用哪个API呢？

如果您只需要监视特定属性的变化并执行特定的逻辑，那么您应该使用 watch API。如果您需要立即执行逻辑，并希望在涉及到多个响应式数据时自动重新计算，则应该使用 watchEffect API。

最后，如果您尝试在 watchEffect 中使用一个非响应式的变量，那么它将不会被追踪，也就是说，当它发生变化时，回调函数不会被执行。因此，请确保您只在 watchEffect 中使用响应式数据。

总结

watch 和 watchEffect 都是Vue 3响应式系统中常用的API。它们有很多相似之处，但是它们之间也有一些重要的区别。了解这些区别可以帮助你更好地选择使用哪个API来处理你的

更多题目

juejin.cn/column/7201…