watchEffect和watch区别

watch和watchEffect是Vue3中用于监听数据变化的两个API，它们之间有以下区别：

1. watch可以监听指定的数据或者计算属性，并在数据变化时执行相应的回调函数。watch可以添加配置项，例如deep、immediate等，用于控制监听的行为。而watchEffect则是一个副作用函数，它会立即执行一次，并且会监听引用数据类型的所有属性，不需要具体到某个属性。

2. watch可以监听多个数据或计算属性，每个数据变化都会触发回调函数。而watchEffect只需要在函数内部使用到的响应式数据发生变化时，才会触发回调函数。

3. watch可以获取到新值和旧值，可以通过配置项`deep`来深度监听对象或数组的变化。而watchEffect只能获取到新值，无法获取旧值。

4. watch可以在组件实例创建时立即执行回调函数，而watchEffect会在组件渲染时自动执行一次，并且在组件卸载时停止监听。

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

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

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

// 使用watch监听count的变化
watch(() => state.count, (newVal, oldVal) => {
  console.log(`count变化了，新值为${newVal}，旧值为${oldVal}`)
})

// 使用watchEffect监听name的变化
watchEffect(() => {
  console.log(`name变化了，新值为${state.name}`)
})

// 修改数据，触发监听
state.count++
state.name = 'Bob'