Vue 3 watch watchEffect 的区别

15 min read

在Vue 3中，watch和watchEffect是用于监听数据变化的API。虽然它们的功能类似，但有一些关键的区别：

  1. watch是一个有副作用的监听器，当依赖的数据发生变化时，会执行回调函数。它可以监听多个数据源，并且可以指定监听器的行为（立即执行或延迟执行），以及如何处理前一个值和当前值。
watch(() => {
  // 监听整个对象
  return state.obj
}, (newVal, oldVal) => {
  // 回调函数处理数据变化
  console.log('obj changed', newVal, oldVal)
})

watch(() => {
  // 监听对象中的某个属性
  return state.obj.value
}, (newVal, oldVal) => {
  // ...
})
  1. watchEffect是一个没有副作用的监听器，它会自动追踪其依赖的数据，并在数据变化时执行回调函数。它更适合用于处理数据改变后不需要返回值的情况。
watchEffect(() => {
  // 使用数据，不需要指定监听的依赖
  console.log(state.value)
})

总结来说，watch提供了更高级和更灵活的选项，适用于需要明确控制监听器行为的情况。而watchEffect则更简单和方便，适用于只需要自动追踪数据变化并执行回调的情况。