watchEffect 和watch的区别。

`watchEffect` 和 `watch` 是 Vue 3 中新增的两个响应式 API，用于监听数据变化并执行相应操作。

- `watchEffect`：接收一个函数作为参数，该函数内部会自动追踪其依赖的响应式数据，并在依赖数据变化时重新执行该函数。与 `computed` 的区别是，`watchEffect` 不需要手动指定依赖项，而是自动进行依赖追踪。

- `watch`：接收两个参数，第一个参数是要监听的数据，第二个参数是一个回调函数，在监听的数据发生变化时执行。与 `watchEffect` 的区别是，`watch` 需要手动指定要监听的数据，而且回调函数只在监听的数据发生变化时执行，不会在初始化时执行。

总而言之，`watchEffect` 更加方便快捷，适用于监听复杂表达式或多个数据的变化；而 `watch` 更加灵活，适用于需要手动指定监听数据的场景。

相关问题

watcheffect和watch区别

watchEffect和watch是Vue.js中的两种监听器，它们都可以用于监视数据的变化并执行回调函数，但在写法和用法上有一些区别。首先，watch需要明确指定要监听的属性，而watchEffect会根据其内部的属性自动进行监听。另外，watchEffect在初始化时一定会执行一次，并且会收集要监听的数据，而watch只有在设置了初始化监听时才会开始监听。此外，watch具有一定的惰性，即只有在数据变化时才会执行回调函数，而watchEffect更加即时，在页面首次加载时也会执行回调函数（除非设置了immediate: true）。另外，watchEffect可以直接获取到原始值，而watch需要通过指定监视的属性来获取对应的值。最后，watchEffect可以通过调用stop函数来取消监听，而watch需要通过返回一个取消监听的函数来实现取消监听。所以，watchEffect和watch虽然底层实现相同，但在使用上有一些差异。

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'