前端

在Vue中，`watch`和`watchEffect`是两种响应式侦听器，都能够对响应式状态的变化作出反应，但是它们的工作方式和使用场景有所不同。

### watch

`watch` API 允许我们侦听特定的数据源，并在数据源改变时执行回调函数。它是响应式系统的一部分，非常适合于执行异步操作或比较昂贵的操作，因为你可以精确控制何时以及如何响应状态的变化。

- **精确性**: `watch`允许你指定确切的响应式引用或计算属性来侦听。
- **懒执行**: `watch`默认情况下不会立即执行回调，它只会在侦听的响应式源发生变化时才执行。
- **深度监听**: `watch`可以配置为深度监听，侦听对象内部属性的变化。
- **旧值和新值**: `watch`回调提供新旧值，便于比较。
- **停止监听**: `watch`返回一个停止观察函数，你可以用它来停止监听。

**例子**:

```vue
<template>
  <div>{{ count }}</div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      // 当 count 改变时，这个函数将被调用
      console.log(`Count changed from ${oldVal} to ${newVal}`);
    }
  }
}
</script>
```

### watchEffect

`watchEffect`是一个响应式侦听器，它自动追踪它的函数内部使用的任何响应式状态，当这些状态改变时会重新执行该函数。

- **自动追踪**: `watchEffect`会自动侦听函数内部所有的响应式引用，并在引用更新时重新运行。
- **立即执行**: `watchEffect`在创建时会立即执行一次，确保响应式效果与当前的状态同步。
- **无需指定侦听源**: 不需要像`watch`那样指定侦听的具体状态，它会自动收集依赖。
- **无旧值**: `watchEffect`不提供旧值，因为它不侦听特定的数据源。
- **停止监听**: `watchEffect`同样返回一个停止监听的函数。

**例子**:

```vue
<template>
  <div>{{ count }}</div>
</template>

<script>
import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);

    watchEffect(() => {
      // 这个函数会在 setup() 时立即执行一次，并在 count 改变时再次执行
      console.log(`Count is now: ${count.value}`);
    });
    
    return { count };
  }
}
</script>
```

总结一下，`watch`更适用于当你需要侦听特定数据并在变化时进行比较或执行复杂逻辑时，而`watchEffect`则更适用于当你希望自动追踪并响应响应式状态变化，而不需要过多地控制侦听源和执行时机时。

在 Vue 中，watch和watchEffect的区别是什么？

watch

watchEffect