vue全家桶进阶之路32：Vue3 WatchEffect和watch 监听

在 Vue 3 中，watchEffect 是一个用于监听响应式数据变化的 API。它可以在函数内部自动跟踪数据的依赖，并在依赖变化时重新运行函数。

watchEffect 的作用以及各个参数的功能讲解：

watchEffect(effect: (onInvalidate: InvalidateCbRegistrator) => void | (() => void) | Promise<void>, options?: WatchEffectOptions): WatchStopHandle

• • effect：要监听的响应式数据以及需要执行的副作用函数。effect 函数接收一个 onInvalidate 回调函数作为参数，用于在 effect 的依赖发生变化时执行清理函数。effect 函数可以返回一个清理函数，也可以返回一个 Promise，Promise 完成时执行的函数也会被视为清理函数。如果 effect 函数中使用的数据没有在响应式对象中被引用，那么 watchEffect 不会监听到这些数据的变化。
  • options：监听选项对象，可选。可以用来配置监听的行为，例如 deep、flush 等选项。具体的选项请参考下面的讲解。
  • 返回值：一个函数，调用它可以停止监听。

WatchEffectOptions

　　　　watchEffect 函数接受一个可选的选项对象，用于配置监听行为。以下是 WatchEffectOptions 对象的属性及其功能：

• • lazy：是否延迟执行 effect 函数。如果设置为 true，则在首次调用 watchEffect 时不会执行 effect 函数，只有在其依赖发生变化时才会执行。默认为 false。
  • deep：是否深度监听对象和数组的变化，默认为 false。如果设置为 true，则会递归监听对象和数组中的所有属性。
  • flush：何时执行回调函数。默认为 'pre'，表示在响应式数据变化后立即执行回调函数，但在同一事件循环中的其他变化不会触发回调函数。如果设置为 'post'，则会在同一事件循环中的所有变化都发生后执行回调函数。

例如，以下代码使用 watchEffect 监听 message 的变化，并在变化时执行回调函数。

import { watchEffect } from 'vue';

watchEffect(() => {
  console.log(`message 变为 ${message}`);
});

下面是一个简单的例子，演示了如何使用 watchEffect 监听响应式数据变化：

<template>
  <div>
    <p>输入框的值为：{{ message }}</p>
    <input v-model="message" />
  </div>
</template>

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

export default defineComponent({
  setup() {
    const message = ref('');

    watchEffect(() => {
      console.log(`message 值改变为：${message.value}`);
    });

    return {
      message
    };
  }
});
</script>

在这个例子中，我们使用 ref 函数定义了一个名为 message 的响应式数据，并将其初始化为空字符串。我们使用 watchEffect 函数监听 message 的变化，并在函数内部打印出 message 的值。因为 watchEffect 函数会自动跟踪 message 的依赖，所以当用户在输入框中输入内容时，watchEffect 函数就会重新运行，打印出新的 message 值。

需要注意的是，watchEffect 函数的回调函数不需要显式地指定依赖项，它会自动跟踪回调函数内部使用到的所有响应式数据。因此，当你使用 watchEffect 函数时，不需要再使用 watch 函数或 computed 函数来监听数据变化。但是，如果你需要监听某个特定的响应式数据变化，可以在回调函数中使用该数据，这样 watchEffect 就会自动跟踪它。

watchEffect 函数的返回值是一个用于停止监听的函数。当你调用这个函数时，watchEffect 就会停止监听响应式数据的变化。

以下是一个示例，演示如何使用 watchEffect 函数的返回值停止监听：

<template>
  <div>
    <p>输入框的值为：{{ message }}</p>
    <button @click="stopWatching">停止监听</button>
    <input v-model="message" />
  </div>
</template>

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

export default defineComponent({
  setup() {
    const message = ref('');

    const stopWatching = watchEffect(() => {
      console.log(`message 值改变为：${message.value}`);
    });

    function stopWatching() {
      stopWatching();
    }

    return {
      message,
      stopWatching
    };
  }
});
</script>

在这个例子中，我们定义了一个名为 stopWatching 的函数，它调用了 watchEffect 函数的返回值，从而停止了监听。我们在模板中添加了一个按钮，当用户点击它时，就会调用 stopWatching 函数，从而停止监听 message 的变化。

watch的作用以及各个参数的功能讲解：

watch 是 Vue 3 中用于监听响应式数据变化的 API，它能够在响应式数据发生变化时执行回调函数。以下是 watch 函数的参数及其功能：

1. watch(source: string | Function | Ref, callback: Function, options?: WatchOptions): WatchStopHandle

• source：要监听的响应式数据，可以是一个字符串（表示要监听的数据在组件实例中的属性名）、一个函数（返回要监听的数据）或一个 ref 对象。
• callback：响应式数据变化时要执行的回调函数。回调函数接收两个参数：新值和旧值。
• options：监听选项对象，可选。可以用来配置监听的行为，例如 deep、immediate 等选项。具体的选项请参考下面的讲解。
• 返回值：一个函数，调用它可以停止监听。

2. WatchOptions

watch 函数接受一个可选的选项对象，用于配置监听行为。以下是 WatchOptions 对象的属性及其功能：

• immediate：是否在监听开始时立即执行回调函数，默认为 false。
• deep：是否深度监听对象和数组的变化，默认为 false。如果设置为 true，则会递归监听对象和数组中的所有属性。
• flush：何时执行回调函数。默认为 'pre'，表示在响应式数据变化后立即执行回调函数，但在同一事件循环中的其他变化不会触发回调函数。如果设置为 'post'，则会在同一事件循环中的所有变化都发生后执行回调函数。
• onTrack：监视属性被访问的函数。它接收一个追踪对象（TrackOpTypes）和追踪的目标对象（target）。可以用它来进行依赖追踪分析等操作。
• onTrigger：监视属性被修改的函数。它接收一个触发对象（TriggerOpTypes）和触发的目标对象（target）。可以用它来进行调试、性能分析等操作。

• 例如，以下代码监听 message 的变化，并在变化时执行回调函数，同时设置 immediate 选项为 true，表示在组件挂载时立即执行一次回调函数。

import { watch } from 'vue';

watch(
  () => message, // 要监听的响应式数据
  (newValue, oldValue) => {
    console.log(`message 从 ${oldValue} 变为 ${newValue}`);
  },
  {
    immediate: true // 在组件挂载时立即执行回调函数
  }
);

watchEffect 和 watch 都是 Vue 3 中用于监听响应式数据变化的 API，它们之间的主要区别在于回调函数的类型和依赖项的声明方式。

• watchEffect 接收一个不带参数的函数作为回调函数，在函数内部使用到的响应式数据变化时会自动触发回调函数。watchEffect 会自动追踪响应式数据的变化，并在每次变化时重新运行回调函数。
• watch 接收两个参数：第一个参数是要监听的响应式数据，第二个参数是一个回调函数。回调函数接收两个参数：新值和旧值。在响应式数据变化时，watch 会调用回调函数，并传入新值和旧值。可以通过第三个参数来声明要监听的选项，例如 deep、immediate 等。

因为 watchEffect 自动追踪响应式数据的变化，所以它更适合处理简单的数据逻辑。如果需要监听特定的响应式数据或使用更高级的选项，可以使用 watch 函数。使用 watch 函数需要显式声明要监听的响应式数据，这可以使代码更具可读性。此外，watch 函数还支持声明多个要监听的响应式数据，这使得它可以处理更复杂的数据逻辑。

总之，如果你只需要监听一些简单的响应式数据变化，可以使用 watchEffect 函数。如果需要监听特定的响应式数据或使用更高级的选项，可以使用 watch 函数。

以下是一个示例，演示 watchEffect 和 watch 的差别：

<template>
  <div>
    <p>message1 值为：{{ message1 }}</p>
    <p>message2 值为：{{ message2 }}</p>
    <button @click="increment">增加 message1 和 message2 的值</button>
  </div>
</template>

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

export default defineComponent({
  setup() {
    const message1 = ref(0);
    const message2 = ref(0);

    // watchEffect 自动追踪响应式数据的变化
    watchEffect(() => {
      console.log(`message1 值变为 ${message1.value}`);
    });

    // watch 需要显式声明要监听的响应式数据
    watch(message2, (newValue, oldValue) => {
      console.log(`message2 从 ${oldValue} 变为 ${newValue}`);
    });

    function increment() {
      message1.value++;
      message2.value++;
    }

    return {
      message1,
      message2,
      increment
    };
  }
});
</script>

在这个例子中，我们声明了两个响应式数据 message1 和 message2，并分别使用了 watchEffect 和 watch 监听它们的变化。watchEffect 自动追踪 message1 的变化，并在变化时触发回调函数。而 watch 则需要显式声明要监听的 message2，并在它的变化时触发回调函数。在点击按钮时，我们同时增加了 message1 和 message2 的值，从而触发了相应的回调函数。

watchEffect 和 watch 的区别在于，watchEffect 监听的是一个函数的副作用，而 watch 监听的是一个具体的响应式数据，因此 watchEffect 不需要显式指定监听的数据，它会自动检测 effect 函数中使用的响应式数据，并在其发生变化时执行回调函数。此外，watchEffect 也不需要手动停止监听，它会在组件卸载时自动停止监听。但是，watchEffect 不支持监听选项对象中的 immediate、onTrack 和 onTrigger 属性。