Vue3中watch和watchEffect有什么区别？

太长不看版： watch需要手动指定监听的数据，仅在数据变化时触发；watchEffect自动监听无需指定，初始化时默认执行一次绑定函数。

---

在Vue 3中，watch和watchEffect都是用于响应式数据的变化，但是它们之间有一些区别。

watch 是一个选项API，在组件的选项中使用，可监听指定的数据变化，并执行回调函数。

• 它需要显式指定要监听的数据和回调函数。
• 当被监听的数据变化时，Vue会自动调用回调函数。
• 相比之下，watch提供了更多的控制选项，例如可以设置深度监听、立即执行回调函数、手动停止监听等。

watchEffect是一个函数API，在组件的setup函数或生命周期函数中使用。它会自动追踪依赖的响应式数据，并在数据变化时执行回调函数。

• 与watch不同，watchEffect不需要显式地指定要监听的数据，它会自动追踪函数内部使用的响应式数据。
• 由于watchEffect的自动追踪机制，它通常用于处理副作用，例如执行异步操作或者更新UI。

---

因此，如果需要对响应式数据进行细粒度的控制，可以使用watch API；
如果只是需要自动追踪响应式数据并触发副作用，可以使用watchEffect函数。

---

示例：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <p>Double: {{ double }}</p>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

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

    // 使用 watchEffect 响应式地追踪 count
    watchEffect(() => {
      state.double = state.count * 2;
    });

    return {
      count: state.count,
      double: state.double,
    };
  },
};
</script>

使用 watch 函数，我们监听了 count 的变化，并在每次变化时执行回调函数。
通过 watchEffect 函数，我们自动追踪了 count 的依赖，并在其变化时更新了 state.double 的值。

---

要选择使用watch还是watchEffect，取决于具体的场景和需求。

如果需要对响应式数据进行细粒度的控制，例如只监听特定的属性、需要手动停止监听等，那么使用watch会更加合适。

如果只是需要自动追踪响应式数据并触发副作用，例如执行异步操作或者更新UI，那么使用watchEffect会更加方便。

总之，watch和watchEffect都是非常有用的响应式API，开发者可以根据具体的需求选择使用哪一个。另外，在使用watch和watchEffect时，需要注意避免多余的计算和渲染，以提高应用的性能和响应速度。

---

PS：如何停止watch

在Vue中，使用watch来侦听数据时，它会返回一个停止侦听函数，你可以调用这个函数来停止侦听。

这里有一个例子：

import { watch, ref } from 'vue';

export default {
  setup() {
    // 定义一个响应式数据
    const count = ref(0);

    // 使用watch来侦听count的变化，并保存返回的停止侦听函数
    const stopWatching = watch(count, (newValue, oldValue) => {
      // 这里是当count变化时执行的副作用
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    // 当你想停止侦听时，调用stopWatching函数
    stopWatching();

    return {
      count,
    };
  },
};

在上面的例子中，stopWatching就是调用watch时返回的函数。当你调用stopWatching()时，会停止对count的侦听。

如何停止watchEffect

通常，你可能希望在组件卸载时或满足特定条件时停止侦听，所以你可以将停止侦听的逻辑放在Vue的生命周期钩子中，或者根据应用的逻辑在合适的时机调用stopWatching。
在 Vue 3 中，可以使用 watchEffect 方法来创建一个响应式的副作用函数。如果需要停止这个 watchEffect，可以使用 stop 方法来停止它的执行。

下面是一个简单的示例代码：

import { watchEffect, reactive, ref } from 'vue';

const state = reactive({
  count: 0
});

const stop = watchEffect(() => {
  console.log(state.count);
});

// 在某个时刻停止 watchEffect 的执行
stop();

在这个示例中，我们首先使用 watchEffect 创建了一个副作用函数，然后将其赋值给了一个变量 stop。要停止这个副作用函数的执行，只需要调用 stop 方法即可。