彻底搞懂 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 中非常有用的工具，它们在不同的场景下有不同的用途。总的来说，它们的区别主要在于以下几点：

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