watch和watchEffect的区别？

`watch` 和 `watchEffect` 都是 Vue 3 中的响应式 API，它们都用于监听响应式数据的变化，但是它们的使用场景和用法有所不同。

`watch` 用于监听单个响应式数据的变化，当指定的响应式数据发生变化时，就会触发回调函数。`watch` 可以接收两个参数：要监听的响应式数据和回调函数。回调函数会接收到两个参数：新值和旧值。

例如：

import { watch, reactive } from 'vue'

const state = reactive({
  count: 0
})

watch(() => state.count, (newVal, oldVal) => {
  console.log(`count 从 ${oldVal} 变成了 ${newVal}`)
})

在上面的例子中，我们使用 `watch` 监听了响应式数据 `state.count` 的变化，当 `state.count` 发生变化时，回调函数就会被调用。

`watchEffect` 则用于监听多个响应式数据的变化，当任何一个响应式数据发生变化时，就会触发回调函数。`watchEffect` 可以接收一个函数作为参数，这个函数会返回响应式数据的值。当这些响应式数据发生变化时，函数就会重新执行。

例如：

import { watchEffect, reactive } from 'vue'

const state = reactive({
  count: 0,
  name: '张三'
})

watchEffect(() => {
  console.log(`count 的值为 ${state.count}`)
  console.log(`name 的值为 ${state.name}`)
})

在上面的例子中，我们使用 `watchEffect` 监听了响应式数据 `state.count` 和 `state.name` 的变化，当任何一个响应式数据发生变化时，回调函数就会被调用。