vue3里watch vs. watchEffect

在Vue 3中，watch和watchEffect都是用于监听变化的方法，但它们有一不同之。

1. watch：
watch需要指明要监听的对象和要执行的回调函数。当监听的值发变化时，回调函数会被触。watch可以访问新值和旧值，因此可以用于处理需要比较新旧值的情况。

2. watchEffect：
watchEffect需要指明要监听的对象，而是根据回调函数中使用的属性来自进行监听。每当回调函数中使用的属性发生变化时，watchEffect的回调函数就会被执行。watchEffect不能访问新值和旧值，因此适用于不需要比较新旧值的情况。

下面是一个示例，演示了watch和watchEffect的使用：

import { reactive, watch, watchEffect } from 'vue';

const data = reactive({
  name: 'John',
  age: 25,
});

// 使用watch监听name属性的变化
watch(() => data.name, (newVal, oldVal) => {
  console.log(`Name changed from ${oldVal} to ${newVal}`);
});

// 使用watchEffect监听age属性的变化
watchEffect(() => {
  console.log(`Age changed to ${data.age}`);
});

// 修改属性值，触发监听
data.name = 'Alice'; // 输出：Name changed from John to Alice
data.age = 30; // 输出：Age changed to 30

需要注意的是，watchEffect会在组件初始化时执行一次，并且在每次组件重新渲染时都会执行。而watch只在监听的值发生变化时执行。