彻底搞懂 Vue3 中 watch 和 watchEffect是

在 Vue 3 的响应式世界里，watch 和 watchEffect 如同两位技艺高超的剑客，各自挥舞着独特的剑法，守护着数据的安宁。他们虽然目的相同——侦听数据的变化，但招式和风格却截然不同，为开发者们提供了更加灵活和精细的数据观测能力。

下面我带着大家来进入这个世界，一起学习 VUE3 这两大特性的详细用法。

watch 的用法

watch 函数允许你侦听一个或多个响应式引用（refs）或计算属性（computed properties），并在它们变化时运行一个回调函数。这个函数提供了更多的控制和灵活性，允许你明确指定要侦听哪些数据，以及获取新旧值进行比较。

基本用法

在 Vue 3 中，watch 函数通常用于 setup 函数内部，接受两个参数：要侦听的数据源和回调函数。数据源可以是响应式引用（ref）、计算属性（computed）或者是一个返回响应式值的函数。

侦听单个数据源

import { ref, watch } from 'vue';

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

    watch(count, (newValue, oldValue) => {
      console.log(`count changed from ${oldValue} to ${newValue}`);
    });

    return { count };
  },
};

侦听多个数据源

import { ref, watch } from 'vue';

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

    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`count: ${oldCount} -> ${newCount}, name: ${oldName} -> ${newName}`);
    });

    return { count, name };
  },
};

侦听计算属性

import { ref, computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubled = computed(() => count.value * 2);

    watch(doubled, (newValue, oldValue) => {
      console.log(`doubled changed from ${oldValue} to ${newValue}`);
    });

    return { count, doubled };
  },
};

侦听 getter 函数

import { ref, watch } from 'vue';

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

    watch(() => count.value + name.value, (newValue, oldValue) => {
      console.log(`combined value changed from ${oldValue} to ${newValue}`);
    });

    return { count, name };
  },
};

选项参数

除了数据源和回调函数外，watch 还接受一个可选的选项对象，用于配置侦听器的行为。

• deep：是否深度侦听对象内部的变化。默认为 false。
• immediate：是否在侦听器创建时立即执行一次回调函数。默认为 false。
• flush：何时触发回调。可以是 'pre'（在组件更新之前）、'post'（在组件更新之后）或 'sync'（同步触发）。默认为 'post'。
• onTrack 和 onTrigger：用于调试，它们分别会在响应式依赖被追踪和触发时调用。

watch(count, (newValue, oldValue) => {
  // ...
}, {
  deep: true, // 深度侦听
  immediate: true, // 立即执行
  flush: 'pre' // 在组件更新之前触发
});

停止侦听

watch 函数会返回一个停止侦听的函数，你可以调用这个函数来取消对数据源的侦听。这在组件卸载或某些条件下需要停止侦听时非常有用。

const stopWatch = watch(count, (newValue, oldValue) => {
  // ...
});

// 停止侦听
stopWatch();

侦听器的响应式依赖

watch 函数创建的侦听器是响应式的，这意味着它们可以依赖于其他响应式引用或计算属性。当这些依赖项发生变化时，侦听器会自动重新评估其回调函数是否需要执行。

watchEffect 的用法

与 watch 不同，watchEffect 会自动收集其执行函数中的响应式依赖，并在依赖变化时重新运行该函数。它不需要你明确指定要侦听哪些数据，而是自动追踪。这使得 watchEffect 在某些场景下更加简洁和方便。

基本用法

watchEffect 接受一个回调函数作为参数，这个回调函数会在其首次执行时立即运行，并自动收集其内部所依赖的所有响应式数据。当这些依赖的数据发生变化时，watchEffect 会重新运行该回调函数。

import { ref, watchEffect } from 'vue';

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

    watchEffect(() => {
      console.log(`count is: ${count.value}`);
    });

    // 每当 count 发生变化时，上面的回调函数都会重新执行

    // 例如，在模板中或 setup 函数的其他地方修改 count
    // count.value++

    return { count };
  },
};

清除副作用

watchEffect 的回调函数可以返回一个清理函数（cleanup function），该函数会在下次重新运行回调之前被调用，用于清除之前的副作用（如事件监听器、计时器等）。

import { ref, watchEffect } from 'vue';

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

    watchEffect(() => {
      console.log(`开始监听 count`);

      // 设置一个定时器
      intervalId = setInterval(() => {
        console.log(`count 的当前值是: ${count.value}`);
      }, 1000);

      // 返回一个清理函数
      return () => {
        console.log(`停止监听 count`);
        clearInterval(intervalId);
      };
    });

    // 当 count 发生变化时，会停止之前的定时器并设置新的定时器

    return { count };
  },
};

停止侦听

与 watch 类似，watchEffect 也返回一个停止侦听的函数。但通常，我们不需要显式调用这个停止函数，因为 Vue 会自动管理这些侦听器的生命周期。然而，在某些特殊情况下，你可能需要手动停止侦听。

import { ref, watchEffect } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const stopEffect = watchEffect(() => {
      console.log(`count is: ${count.value}`);
    });

    // 在某个条件下停止侦听
    // if (someCondition) {
    //   stopEffect();
    // }

    return { count };
  },
};

立即运行与延迟运行

默认情况下，watchEffect 在其创建时会立即执行一次回调函数。但你也可以通过传入一个选项对象来配置这个行为。

watchEffect(() => {
  // ...
}, {
  immediate: false // 默认为 true，设置为 false 可阻止立即执行
});

刷新时机

watchEffect 的刷新时机默认为 'post'，即在组件更新后执行。但你也可以通过 flush 选项来更改这个行为。

watchEffect(() => {
  // ...
}, {
  flush: 'pre' // 在组件更新前执行
});

总结

总的来说，watch 和 watchEffect 都是 Vue 3 中非常有用的工具，它们在不同的场景下有不同的用途。总的来说，它们的区别主要在于以下几点：

1. 触发方式：watch 需要你明确指定要侦听哪些数据，而 watchEffect 则会自动收集其执行函数中的响应式依赖。
2. 灵活性：watch 提供了更多的选项，如深度侦听、立即执行等，允许你更精细地控制侦听行为。而 watchEffect 则更加简洁和自动化。
3. 用途：watch 更适合在需要精确控制侦听哪些数据源，或者需要比较新旧值的情况下使用。而 watchEffect 则在不需要明确指定依赖，或者需要自动追踪依赖变化时更加适用。
4. 性能：由于 watchEffect 会自动收集依赖，在某些复杂的应用中可能会比 watch 稍微慢一些。但在大多数情况下，这种差异是可以忽略不计的。

看完这篇文章，对于 Vue 3 中 watch 和 watchEffect 的用法，你学废了吗。