初识 Vue 3 中的 Watch 用法

初识 Vue 3 中的 Watch 用法

在 Vue 3 中，watch 是一个非常重要的响应式 API，用于监听和响应数据的变化。无论是简单的数据监控还是复杂的异步操作，watch 都能帮助我们实现更精细的控制。本文将从基础到应用，逐步介绍 Vue 3 中 watch 的用法，并通过示例代码帮助大家更好地理解和掌握。

1. 什么是 watch？

watch 是 Vue 3 提供的一个组合式 API，用于监听一个或多个响应式数据源的变化，并在数据变化时执行相应的回调函数。与 ***puted 不同，watch 主要用于处理副作用（如异步操作、数据提交等），而不是返回一个新的值。

2. 基本用法

2.1 单个数据的监听

首先，我们来看一个简单的例子，监听一个 count 变量的变化。

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 };
  },
};

在这个例子中，我们使用 ref 创建了一个响应式变量 count，然后通过 watch 监听它的变化。每当 count 的值发生变化时，回调函数就会被触发，输出新旧值。

2.2 多个数据的监听

有时候，我们需要同时监听多个数据的变化。这时可以使用数组的形式来传递需要监听的数据。

import { ref, watch } from 'vue';

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

    watch([count, name], ([newCount, newName], [oldCount, oldName]) => {
      console.log(`Count changed from ${oldCount} to ${newCount}`);
      console.log(`Name changed from ${oldName} to ${newName}`);
    });

    return { count, name };
  },
};

在这个例子中，我们同时监听了 count 和 name 两个变量的变化。当其中任何一个变量发生变化时，回调函数都会被触发。

3. 深度监听

默认情况下，watch 只会监听第一层的数据变化。如果需要监听嵌套对象或数组的变化，可以使用 deep: true 选项。

import { reactive, watch } from 'vue';

export default {
  setup() {
    const state = reactive({
      user: {
        name: 'John',
        age: 30,
      },
    });

    watch(state, (newState, oldState) => {
      console.log('State changed:', newState, oldState);
    }, { deep: true });

    return { state };
  },
};

在这个例子中，我们使用 reactive 创建了一个响应式对象 state，并启用了深度监听。这样，无论 state 中的任何属性发生变化，回调函数都会被触发。

4. 立即执行回调

默认情况下，watch 的回调函数不会在初始化时立即执行。如果需要在初始化时立即执行一次回调，可以使用 immediate: true 选项。

import { ref, watch } from 'vue';

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

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

    return { count };
  },
};

在这个例子中，由于设置了 immediate: true，回调函数会在 count 初始化时立即执行一次。

5. 处理异步操作

watch 还可以用于处理异步操作。例如，我们可以在数据变化时发起一个网络请求。

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

export default {
  setup() {
    const searchQuery = ref('');

    watch(searchQuery, async (newQuery, oldQuery) => {
      if (newQuery !== oldQuery) {
        try {
          const response = await axios.get(`https://api.example.***/search?q=${newQuery}`);
          console.log('Search results:', response.data);
        } catch (error) {
          console.error('Error fetching search results:', error);
        }
      }
    });

    return { searchQuery };
  },
};

在这个例子中，我们监听了 searchQuery 的变化，并在每次变化时发起一个异步的网络请求来获取搜索结果。注意，为了避免重复请求，我们在回调函数中检查了新旧值是否相同。

6. 停止监听

在某些情况下，我们可能需要在组件卸载时停止监听。这时可以使用 onBeforeUnmount 钩子来手动停止监听。

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

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

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

    onBeforeUnmount(() => {
      stopWatch();
    });

    return { count };
  },
};

在这个例子中，我们使用 watch 返回的 stop 函数来停止监听，并在组件卸载前调用它。

7. 总结

通过以上几个例子，我们可以看到 watch 在 Vue 3 中的强大功能。无论是简单的数据监控还是复杂的异步操作，watch 都能帮助我们实现更精细的控制。希望本文能帮助大家从基础到应用逐步掌握 Vue 3 中 watch 的用法。