【vueUse库Watch模块各函数简介及使用方法--下篇】

vueUse库是一个专门为Vue打造的工具库，提供了丰富的功能，包括监听页面元素的各种行为以及调用浏览器提供的各种能力等。其中的Browser模块包含了一些实用的函数，以下是这些函数的简介和使用方法：

vueUse

Watch

函数

1. watchImmediate

watchImmediate简介及使用方法

vueUse 是一个基于 Vue 3 Composition API 的实用函数库，它提供了一系列用于日常开发任务的 Composition API 函数，旨在减少样板代码并提高开发效率。虽然 vueUse 官方文档和API中直接提到的 watchImmediate 函数可能不是直接作为独立函数存在（因为 Vue 3 的 watch 函数本身已经支持 immediate 选项），但我们可以根据 Vue 3 的 watch 函数的用法来推断如何在 vueUse 的上下文中使用类似 immediate 的功能。

Vue 3 的 watch 函数中的 immediate 选项

在 Vue 3 中，watch 函数用于观察 Vue 组件内响应式引用的变化，并在它们变化时执行回调函数。watch 函数接受一个源（可以是 ref、reactive 对象、getter 函数或数组等）和一个回调函数，并可以接收一个选项对象，该对象可以包含 immediate 属性。当 immediate 设置为 true 时，watch 会在其被创建时立即以当前的源值触发回调函数，而不是等到源值第一次变化时才触发。

在 vueUse 中使用类似 immediate 的功能

虽然 vueUse 没有直接提供一个名为 watchImmediate 的函数，但你可以通过配置 watch 函数的选项来使用 immediate 功能。假设你正在使用 vueUse 并在你的 Vue 3 组件中，你可以这样做：

import {
    ref, watch } from 'vue';

// 假设这是 vueUse 的一部分，但实际上这里直接使用了 Vue 3 的 API
// 因为 vueUse 本身不直接提供 watchImmediate，但你可以通过配置 watch 来实现相同的效果

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

    // 使用 watch，并设置 immediate: true
    watch(
      () => count.value,
      (newValue, oldValue) => {
   
        console.log(`count changed from ${
     oldValue} to ${
     newValue}`);
      },
      {
    immediate: true } // 这将使得 watch 在创建时立即执行一次回调函数
    );

    return {
   
      count,
    };
  },
};

总结

虽然 vueUse 没有直接提供一个名为 watchImmediate 的函数，但你可以通过配置 Vue 3 的 watch 函数的 immediate 选项来实现类似的功能。这样，你就可以在 vueUse 的上下文中，利用 Vue 3 的强大功能来响应式地观察数据变化，并在需要时立即执行某些操作。

2. watchOnce

watchOnce简介及使用方法

vueUse库的Watch模块的watchOnce函数以及使用方法

在vueUse库中，watchOnce是一个非常实用的函数，它允许你监听一个响应式数据的变化，但只会在数据第一次变化时触发回调函数，之后即使数据再次变化，回调函数也不会再被调用。这对于需要在数据首次加载或变化时执行一次性操作（如获取数据、设置初始状态等）的场景非常有用。

使用方法

watchOnce函数的使用方法与Vue 3的watch函数类似，但它不接受immediate和deep等选项，因为它的设计初衷就是只监听一次变化。以下是一个基本的使用示例：

import {
    ref, watchOnce } from 'vue';
import {
    watchOnce as useWatchOnce } from '@vueuse/core'; // 如果你使用的是vueUse库中的watchOnce，可能需要这样导入

// 假设这里使用的是Vue 3的ref和watchOnce（注意：vueUse的watchOnce导入方式可能有所不同，具体请参考vueUse的文档）
const source = ref(0);

// 使用watchOnce监听source的变化
watchOnce(source, (newValue, oldValue) => {
   
  console.log(`source changed from ${
     oldValue} to ${
     newValue}, but only once.`);
});

// 更改source的值以触发watchOnce
source.value = 1; // 这将触发回调函数，并打印日志
source.value = 2; // 这将不会触发回调函数，因为watchOnce只监听一次变化

注意：上面的示例中，我使用了Vue 3的ref和假设的watchOnce导入方式来说明如何使用。然而，在vueUse库中，watchOnce的导入方式可能略有不同，具体取决于vueUse的版本和你的项目配置。通常，你需要从@vueuse/core（或vueuse，取决于你的安装方式和版本）中导入watchOnce。

vueUse中的watchOnce

在vueUse库中，watchOnce函数通常是对Vue 3的watch函数的一种封装，它内部会处理只触发一次的逻辑。这意味着，当你从vueUse中导入并使用watchOnce时，你实际上是在利用vueUse提供的便利性和封装性来简化你的代码。

注意事项

• 当你使用watchOnce时，请确保你理解它只会在数据第一次变化时触发回调函数。
• 如果你需要在数据变化时执行多次操作，但每次操作的条件不同，那么你可能需要使用Vue 3的watch函数并