Vue3 中 Watch 监听数据变化的学习笔记

在 Vue3 中，Watch 是一个强大的工具，用于监听数据的变化并执行相应的操作。它为我们提供了一种灵活且高效的方式来处理数据更新时的逻辑。

Watch 可以监听单个数据源，也可以同时监听多个数据源。当被监听的数据发生变化时，回调函数就会被触发。

例如，我们可以监听一个简单的响应式数据：

import { reactive, watch } from 'vue';

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

watch(() => state.count, (newValue, oldValue) => {
  console.log(`Count 从 ${oldValue} 变为了 ${newValue}`);
});

在上述代码中，当 state.count 的值发生变化时，控制台将输出相应的变化信息。

除了监听单个数据，还可以监听多个数据：

watch([() => state.count, () => state.name], (newValues, oldValues) => {
  // 处理多个数据变化的逻辑
});

Watch 还支持深度监听。当我们需要监听对象内部属性的变化时，可以设置 deep 选项为 true：

watch(() => state.obj, (newValue, oldValue) => {
  // 处理对象变化的逻辑
}, { deep: true });

Watch 还可以立即执行回调函数，通过设置 immediate 选项为 true实现：

watch(() => state.count, (newValue, oldValue) => {
  // 初始时也会执行
}, { immediate: true });

在实际开发中，合理地运用 Watch 能够帮助我们实现各种复杂的数据更新逻辑，比如根据数据变化动态更新页面内容、发起网络请求、更新其他相关数据等。

深入理解和熟练运用 Vue3 中的 Watch 监听数据变化的功能，对于构建高效、灵活且响应式的 Vue 应用至关重要。它为我们处理数据变化提供了精确的控制，使我们能够更好地管理应用的状态和行为。