Vue Composition API之侦听器watch/watchEffect

1. watch侦听器

1.1 语法

watch(source: Ref | Function, callback: (newValue: any, oldValue: any) => void, options?: WatchOptions): Watcher;

1.2 参数

• source：需要侦听的响应式数据或函数。如果source是一个函数，则它会在每次组件渲染时被调用，并返回需要侦听的数据。

• callback：侦听器回调函数，当source发生变化时被调用。它接受两个参数：newValue和oldValue，分别为source的新值和旧值。

• options：可选的选项对象，用于配置侦听器的行为。options可以包含以下属性：

  • immediate：布尔值，表示是否在侦听器注册后立即调用回调函数。默认为false。
  • deep：布尔值，表示是否进行深度比较。默认为false。
  • flush：字符串，表示在哪个阶段调用回调函数。可选值有“pre”和“post”，默认为“pre”。

1.3 示例

import { ref, watch } from 'vue';

const count = ref(0);

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

上面的例子中，watch侦听器被用来侦听count的变化。当count发生变化时，回调函数就会被调用，并输出count的新值和旧值。

2. watchEffect侦听器

2.1 语法

watchEffect(callback: (onInvalidate: InvalidateCb) => void): StopHandle;

2.2 参数

• callback：侦听器回调函数，当响应式数据发生变化时被调用。它接受一个参数：onInvalidate，是一个函数，用于手动停止侦听器。
• onInvalidate：一个函数，用于手动停止侦听器。它接受一个参数：callback，即侦听器回调函数。

2.3 示例

import { ref, watchEffect } from 'vue';

const count = ref(0);

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

上面的例子中，watchEffect侦听器被用来侦听count的变化。当count发生变化时，回调函数就会被调用，并输出count的新值。

3. watch和watchEffect的区别

watch和watchEffect都是侦听器的API，但它们有一些区别：

• watch是懒加载的，这意味着它只会在侦听的数据发生变化时才调用回调函数。watchEffect是立即执行的，这意味着它会在组件渲染时立即调用回调函数。
• watch可以监听多个数据，而watchEffect只能监听一个数据。
• watch可以拿到原始值和当前值，而watchEffect只能拿到当前值。
• watchEffect无法侦听不存在于侦听器函数作用域之外的数据，而watch可以。

4. 总结

watch和watchEffect都是非常有用的API，它们可以帮助我们轻松地响应响应式数据的变化。在选择使用哪个侦听器时，我们需要根据具体的需求来决定。