vue3 watch和watchEffect 的用法和区别

在 Vue 3 里，watch 和 watchEffect 都是用于响应式数据变化的 API，但它们在使用方法和应用场景上存在差异。下面详细介绍它们的用法和区别。

用法

watch

watch 用于监听特定的响应式数据源，当数据源发生变化时，会执行相应的回调函数。它可以监听单个数据源，也能监听多个数据源。

监听单个数据源：

import { ref, watch } from 'vue';

const count = ref(0);

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

count.value = 1;

在这个例子中，watch 监听 count 的变化，当 count 的值改变时，回调函数会被触发，打印出新旧值。

监听多个数据源：

import { ref, watch } from 'vue';

const count1 = ref(0);
const count2 = ref(0);

watch([count1, count2], ([newCount1, newCount2], [oldCount1, oldCount2]) => {
  console.log(`count1 从 ${oldCount1} 变为 ${newCount1}，count2 从 ${oldCount2} 变为 ${newCount2}`);
});

count1.value = 1;

这里 watch 监听 count1 和 count2 的变化，当其中任何一个值改变时，回调函数就会被触发。

watchEffect

watchEffect 会立即执行传入的函数，并自动追踪函数内部依赖的所有响应式数据。当这些依赖的数据发生变化时，函数会再次执行。

import { ref, watchEffect } from 'vue';

let props = defineProps(['orderid','randomid'])
const count = ref(0);

watchEffect(() => {
  //此函数内监听的任何值有变化都会触发此函数的执行，要想每次都执行可以外部引入随机数
  console.log('watchEffect',props.orderid,props.randomid)  //通过引入生成的随机数randomid，即使orderid没有变化，此函数也会执行一遍，实现实时刷新
  console.log(`count 的值是 ${count.value}`);
  
});

count.value = 1;

在这个例子中，watchEffect 会立即执行回调函数，打印出 count 的初始值。当 count 的值改变时，回调函数会再次执行，打印出新的值。通过引入生成的随机数randomid，即使orderid，count 没有变化，此函数也会执行一遍，实现实时刷新

区别

1. 触发时机

• watch：默认情况下，只有当监听的数据源发生变化时，回调函数才会执行。它不会在组件初始化时立即执行回调函数，除非设置了 immediate: true 选项。
• watchEffect：会立即执行传入的函数，并且在依赖的响应式数据发生变化时再次执行。

2. 依赖追踪

• watch：需要明确指定要监听的数据源，它只会监听这些明确指定的数据源的变化。
• watchEffect：会自动追踪函数内部依赖的所有响应式数据，无需手动指定。这使得代码更加简洁，但也可能导致意外的重新执行，因为任何被函数访问的响应式数据的变化都会触发函数的重新执行。

3. 旧值获取

• watch：回调函数可以接收两个参数，分别是新值和旧值，方便对比数据的变化。
• watchEffect：无法直接获取旧值，因为它没有明确的新旧值对比机制。

4. 应用场景

• watch：适用于需要在数据变化时执行特定操作，并且需要对比新旧值的场景，比如在数据变化时发送网络请求、更新其他数据等。
• watchEffect：适用于需要在响应式数据变化时自动更新副作用的场景，比如在数据变化时更新 DOM、计算派生数据等，不需要明确指定依赖的情况。