watchEffect和watch有啥不一样

`watch`和`watchEffect`都可以用来监听响应式数据的变化，但是它们在实现和使用上有一些不同点。

首先，`watch`是一个函数，它接受两个参数：要监听的数据和回调函数。当要监听的数据发生变化时，回调函数会被调用。`watch`可以监听单个数据或多个数据，并且可以设置`deep`、`immediate`、`flush`等选项。

举个例子，假设你有一个名为`message`的响应式数据，你可以使用以下代码来监听它的变化：

watch(
  () => message,
  (newValue, oldValue) => {
    console.log(newValue, oldValue);
  }
);

`watchEffect`也是一个函数，它接受一个回调函数作为参数。当回调函数内部使用的响应式数据发生变化时，回调函数会被重新调用。`watchEffect`只能监听单个数据，并且不能设置选项。

举个例子，假设你有一个名为`message`的响应式数据，你可以使用以下代码来监听它的变化：

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log(message);
});

另外，`watch`是惰性的，只有当要监听的数据发生变化时才会执行回调函数，因此可以提高性能。而`watchEffect`是立即执行的，每次重新渲染组件时都会重新执行回调函数，因此会影响性能。

总的来说，`watch`适用于需要监听多个响应式数据、需要设置选项、需要惰性执行回调函数的场景，而`watchEffect`适用于需要监听单个响应式数据的场景。