通常来说，钩子函数是与 Vue 组件生命周期相关的函数，它们用于在组件中进行某些操作或设置，例如：组件初始化、更新、销毁等。这些钩子函数的名称通常以 "use" 开头。

而工具函数则不是钩子函数，它们通常是一些可复用的函数，用于处理常见的问题或提供常见的功能。这些函数可以在 Vue 组件中直接引用或调用，但它们并不与组件的生命周期相关。

Vueuse 中的工具函数和钩子函数的区分也是如此。如果一个函数是用于处理常见的问题或提供常见的功能，那么它通常是一个工具函数。如果一个函数是与 Vue 组件生命周期相关的，并用于在组件中进行某些操作或设置，那么它通常是一个钩子函数。

需要注意的是，这只是一种通用的区分方法，并不是绝对的规则。一些函数可能既可以作为工具函数使用，也可以作为钩子函数使用。在具体使用时，需要根据具体情况来判断。

钩子函数：

• useMouse：用于获取鼠标在元素内部的位置和鼠标按下的状态。
• useIntersectionObserver：用于观察元素的可见性。
• useClipboard：用于读写系统剪贴板。
• useLocalStorage：用于在浏览器中使用localStorage存储数据。
• useSessionStorage：用于在浏览器中使用sessionStorage存储数据。
• usePreferredDark：用于检测用户是否使用暗黑模式。

工具函数：

• debounce：用于创建一个防抖函数，限制函数在一定时间内的调用次数。
• throttle：用于创建一个节流函数，限制函数在一定时间内的调用次数。
• onClickOutside：用于创建一个在点击元素外部时触发的函数。
• useDebounce：用于在组件中创建一个防抖函数。
• useThrottle：用于在组件中创建一个节流函数。
• useClickAway：用于在组件中创建一个在点击元素外部时触发的函数。

需要注意的是，这只是Vueuse提供的一些常用钩子函数和工具函数，它还提供了许多其他功能。

useState 钩子函数可以让我们在组件中定义一个响应式状态。该函数接受一个初始值，并返回一个数组，第一个元素是状态值，第二个元素是设置状态值的函数。以下是一个示例：

<template>
  <div>
    <p>{{count}}</p>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { useState } from "@vueuse/core";

export default {
  setup() {
    const [count, setCount] = useState(0);

    const increment = () => {
      setCount(count.value + 1);
    };

    return {
      count,
      increment,
    };
  },
};
</script>

复制

在这个示例中，我们使用 useState 来定义一个响应式计数器状态，每次点击按钮时将计数器加 1。

useEffect 钩子函数可以让我们在组件挂载后执行一些副作用操作，例如订阅事件、获取数据等等。该函数接受两个参数：副作用操作的函数和依赖项数组。依赖项数组用于确定何时重新运行副作用操作函数。以下是一个示例：

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
import { useState, useEffect } from "@vueuse/core";

export default {
  setup() {
    const [message, setMessage] = useState("");

    useEffect(() => {
      const timeoutId = setTimeout(() => {
        setMessage("Hello, VueUse!");
      }, 3000);

      return () => {
        clearTimeout(timeoutId);
      };
    }, []);

    return {
      message,
    };
  },
};
</script>

复制

在这个示例中，我们使用 useEffect 来设置一个定时器，在 3 秒后将消息文本设置为“Hello, VueUse!”。我们传递一个空的依赖项数组，以确保副作用操作只运行一次。

useRoute 钩子函数可以让我们在组件中访问当前路由信息。该函数返回一个响应式对象，包含当前路由的路径、参数、查询等信息。以下是一个示例：

<template>
  <div>
    <p>当前路径为：{{route.path}}</p>
    <p>当前参数为：{{route.params}}</p>
    <p>当前查询为：{{route.query}}</p>
  </div>
</template>

<script>
import { useRoute } from "@vueuse/core";

export default {
  setup() {
    const route = useRoute();

    return {
      route,
    };
  },
};

复制

在这个示例中，我们使用 useRoute 来获取当前路由信息，并在模板中显示该信息。

useLocalStorage和useSessionStorage是vueuse中常用的钩子函数，用于在浏览器中存储和获取数据。

useLocalStorage用于在浏览器中使用localStorage存储数据。它返回一个数组，包含两个值：一个响应式的ref和一个更新该ref值的函数。通过调用这个函数并传入新的值，可以将该值存储在localStorage中。

以下是一个使用useLocalStorage的示例：

import { useLocalStorage } from 'vueuse';

export default {
  setup() {
    const [count, setCount] = useLocalStorage('count', 0);

    function increment() {
      setCount(count.value + 1);
    }

    return {
      count,
      increment,
    };
  },
};
复制

在这个例子中，我们定义了一个名为count的响应式变量，并通过useLocalStorage将其存储在localStorage中。我们还定义了一个名为increment的函数，该函数将count的值增加1。

useSessionStorage与useLocalStorage的用法类似，但它用于在浏览器中使用sessionStorage存储数据。

以下是一个使用useSessionStorage的示例：

import { useSessionStorage } from 'vueuse';

export default {
  setup() {
    const [name, setName] = useSessionStorage('name', '');

    function updateName(newName) {
      setName(newName);
    }

    return {
      name,
      updateName,
    };
  },
};
复制

在这个例子中，我们定义了一个名为name的响应式变量，并通过useSessionStorage将其存储在sessionStorage中。我们还定义了一个名为updateName的函数，该函数将name的值更新为传入的新值。

useMouse 工具函数可以让我们方便地获取鼠标的位置和状态信息。该函数返回一个响应式对象，包含鼠标的 x 坐标、y 坐标、鼠标是否按下等信息。以下是一个示例：

<template>
  <div>
    <p>x 坐标：{{mouse.x}}</p>
    <p>y 坐标：{{mouse.y}}</p>
    <p>鼠标是否按下：{{mouse.isDown}}</p>
  </div>
</template>

<script>
import { useMouse } from "@vueuse/core";

export default {
  setup() {
    const mouse = useMouse();

    return {
      mouse,
    };
  },
};
</script>

复制

在这个示例中，我们使用 useMouse 来获取鼠标的位置和状态信息，并在页面上显示这些信息。

useIntersectionObserver 是一个自定义的 Vue 钩子函数，它可以让我们方便地观察元素是否在视口中可见。该函数接受一个回调函数和一些配置选项，并返回一个 IntersectionObserver 实例。当被观察的元素进入或离开视口时，IntersectionObserver 实例会调用回调函数。我们可以使用这个回调函数来执行一些操作，例如将可见元素的样式更改为突出显示。

以下是一个示例：

<template>
  <div ref="target">
    <h2>Scroll down to see the effect</h2>
    <div v-for="i in 10" :key="i" class="box">{{ i }}</div>
  </div>
</template>

<script>
import { useIntersectionObserver } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)
    const isVisible = ref(false)

    useIntersectionObserver(
      target,
      ([entry]) => {
        isVisible.value = entry.isIntersecting
      },
      {
        threshold: 0.5,
      },
    )

    return {
      target,
      isVisible,
    }
  },
}
</script>

<style>
.box {
  height: 150px;
  margin: 20px;
  background-color: #f0f0f0;
  border-radius: 10px;
  text-align: center;
  font-size: 48px;
  font-weight: bold;
  color: #000;
  opacity: 0.2;
}

.box.active {
  opacity: 1;
}
</style>

复制

在这个示例中，我们使用 useIntersectionObserver 来创建一个 IntersectionObserver 实例，观察一个 div 元素是否在视口中可见。我们使用 ref 来创建一个对目标元素的引用，并将其传递给 useIntersectionObserver。在回调函数中，我们将 isVisible 值更新为元素是否在视口中可见。最后，我们使用 v-bind:class 来动态绑定一个样式，以突出显示可见元素。

useEventListener 工具函数可以让我们在组件中添加和移除事件监听器。该函数接受一个事件名称、事件处理函数和一个元素。以下是一个示例：

<template>
  <div>
    <p>{{message}}</p>
  </div>
</template>

<script>
import { ref } from "vue";
import { useEventListener } from "@vueuse/core";

export default {
  setup() {
    const message = ref("Hello, VueUse!");

    const handleClick = () => {
      message.value = "Hello, World!";
    };

    useEventListener("click", handleClick, { target: window });

    return {
      message,
    };
  },
};
</script>

复制

在这个示例中，我们使用 useEventListener 来监听窗口的点击事件，并在点击时将消息文本设置为“Hello, World!”。

useDebounce 工具函数可以让我们在组件中创建一个防抖函数。防抖函数可以在一定时间内限制函数的调用次数。该函数接受一个函数和一个延迟时间，并返回一个新函数。以下是一个示例：

<template>
  <div>
    <input v-model="message" @input="updateMessage" />
    <p>{{ debouncedMessage }}</p>
  </div>
</template>

<script>
import { useDebounce } from '@vueuse/core'

export default {
  setup() {
    const message = ref('')
    const debouncedMessage = ref('')

    const updateMessage = useDebounce((newMessage) => {
      debouncedMessage.value = newMessage
    }, 500)

    return {
      message,
      debouncedMessage,
      updateMessage,
    }
  },
}
</script>

复制

在这个示例中，我们使用 useDebounce 来创建一个防抖函数，使得输入框中的值不会立即更新，而是在用户停止输入一段时间之后更新。我们使用 ref 来创建一个输入值的响应式变量，并使用 watch 来监听其值的变化。在 watch 的回调函数中，我们将输入值传递给防抖函数，并在函数的回调函数中更新消息文本。