Vue3 中 watch 与 watchEffect 区别及用法小结

下面我将详细讲解“Vue3 中 watch 与 watchEffect 区别及用法小结”的完整攻略。

watch 和 watchEffect 有什么区别

watch

watch 是一个函数，它接收三个参数，分别是：待监听的数据对象，回调函数和选项对象。当监听对象的值变化时，回调函数就会被触发。

watchEffect

watchEffect 是一个函数，它接收一个回调函数作为参数。当回调函数里使用到的响应式数据发生变化时，watchEffect 就会重新执行。

总的来说，两者的区别在于 watchEffect 只观察代码中使用的响应式变量，而 watch 则需要定义哪好多个属性需要被监听，并且可以对属性进行详细的设置。此外，watchEffect 不支持懒执行和立即销毁。

watch 和 watchEffect 的用法

watch 的用法

下面我们来看一个 watch 的示例：

watch(
  () => state.count, // 监听的对象
  (newVal, oldVal) => { // 当观察的对象 state.count 改变时执行的回调函数
    console.log('newVal:', newVal);
    console.log('oldVal:', oldVal);
  },
  {
    immediate: true, // 立即执行
    deep: true // 对象内部属性值的变化也会触发回调
  }
);

在上面的示例中，我们使用 watch 监听一个计数器的变化。 watch 的定义接收三个参数，第一个是要监听的对象，第二个是监听对象改变时的回调函数，第三个是可选的选项对象。在选项对象中，我们可以设置一些选项，比如 immediate 表示是否在 watch 绑定时立即执行回调， deep 表示是否考虑对象内部属性值的变化。

watchEffect 的用法

下面我们来看一个 watchEffect 的示例：

import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log('count value:', count.value)
});

// 改变count值，触发watchEffect回调
count.value++;

在上面的示例中，我们使用 watchEffect 监听值的变化，当 count 的值发生变化时，会执行回调函数。注意，watchEffect 回调函数至少执行一次，然后会在其依赖的响应式变量发生变化时再次执行。