如何在 Vueuse 中实现防抖？

在前端开发中，防抖（Debounce）是一个非常实用的技术，它可以防止函数在短时间内被频繁调用，从而提升性能和用户体验，Vueuse 是一个基于 Vue 3 的实用工具库，提供了丰富的功能，其中就包括防抖功能，如何在 Vueuse 中实现防抖呢？下面我们将详细介绍。

什么是防抖？

防抖是指在事件触发后，等待一定时间（防抖时间），如果在这段时间内事件没有再次触发，才会执行相应的函数，如果在防抖时间内事件再次触发，就会重新计时，举个例子，当用户在搜索框中输入内容时，我们不希望每次按键都立即发起搜索请求，而是等待用户输入完成后（比如停止输入 500 毫秒）再进行搜索,这就是防抖的应用场景。

Vueuse 中的防抖函数

Vueuse 提供了 `useDebounceFn` 函数来实现防抖功能,它的基本用法如下：

import { useDebounceFn } from '@vueuse/core'
const myFunction = () => {
  console.log('Function executed')
}
const debouncedFn = useDebounceFn(myFunction, 500) // 500 是防抖时间（毫秒）
// 调用防抖函数
debouncedFn()

在上面的代码中，我们首先导入了 `useDebounceFn` 函数，然后定义了一个普通函数 `myFunction`，接着通过 `useDebounceFn` 创建了一个防抖函数 `debouncedFn`，并指定了防抖时间为 500 毫秒，当我们调用 `debouncedFn` 时，如果在 500 毫秒内再次调用它，计时会重新开始，只有在 500 毫秒内没有再次调用，`myFunction` 才会被执行。

防抖函数的参数传递

如果我们的函数需要接收参数，该怎么办呢？`useDebounceFn` 同样支持。

import { useDebounceFn } from '@vueuse/core'
const greet = (name) => {
  console.log(`Hello, ${name}!`)
}
const debouncedGreet = useDebounceFn(greet, 500)
debouncedGreet('Alice')
debouncedGreet('Bob') // 假设在 500 毫秒内再次调用
// 最终只会在 500 毫秒后执行一次 greet 函数，参数为最后一次调用时传递的 'Bob'

可以看到，即使在防抖时间内多次调用 `debouncedGreet` 并传递不同的参数,最终执行函数时会使用最后一次传递的参数。

防抖函数与 Vue 组件的结合

（一）在 Vue 组件的方法中使用

在 Vue 组件中，我们可以在 `methods` 中使用防抖函数。

<template>
  <input type="text" v-model="searchText" @input="debouncedSearch" />
</template>
<script>
import { ref, useDebounceFn } from '@vueuse/core'
export default {
  setup() {
    const searchText = ref('')
    const search = (text) => {
      console.log(`Searching for: ${text}`)
      // 这里可以添加实际的搜索逻辑，比如调用 API
    }
    const debouncedSearch = useDebounceFn(search, 500)
    return {
      searchText,
      debouncedSearch
    }
  }
}
</script>

在这个例子中，当用户在输入框中输入内容时，`debouncedSearch` 会被触发，由于使用了防抖，只有当用户停止输入 500 毫秒后，`search` 函数才会执行，并且传递最新的 `searchText` 值。

（二）在 Vue 组件的生命周期钩子中使用

防抖函数也可以在生命周期钩子中使用，我们希望在组件窗口大小变化时（`resize` 事件）执行一些操作,但又不想频繁触发：

<template>
  <div>Component</div>
</template>
<script>
import { onMounted, onUnmounted, useDebounceFn } from '@vueuse/core'
export default {
  setup() {
    const handleResize = () => {
      console.log('Window resized')
      // 这里可以添加处理窗口大小变化的逻辑
    }
    const debouncedResize = useDebounceFn(handleResize, 300)
    onMounted(() => {
      window.addEventListener('resize', debouncedResize)
    })
    onUnmounted(() => {
      window.removeEventListener('resize', debouncedResize)
    })
    return {}
  }
}
</script>

在 `onMounted` 钩子中，我们给 `window` 添加了 `resize` 事件监听器，使用了防抖函数 `debouncedResize`，这样，只有当窗口停止调整大小 300 毫秒后，`handleResize` 函数才会执行，在 `onUnmounted` 钩子中，我们移除了事件监听器,以避免内存泄漏。

防抖函数的高级用法

（一）立即执行

我们希望在第一次触发事件时立即执行函数，然后再进行防抖，`useDebounceFn` 提供了一个 `immediate` 选项来实现这个功能。

import { useDebounceFn } from '@vueuse/core'
const sayHello = () => {
  console.log('Hello!')
}
const debouncedHello = useDebounceFn(sayHello, 1000, { immediate: true })
debouncedHello() // 立即执行 sayHello 函数
// 之后如果在 1000 毫秒内再次调用 debouncedHello，只有在 1000 毫秒后没有再次调用才会执行

（二）取消防抖

如果我们需要在某个时刻取消正在进行的防抖操作，可以使用 `debouncedFn.cancel()` 方法。

import { useDebounceFn } from '@vueuse/core'
const printMessage = () => {
  console.log('Message printed')
}
const debouncedPrint = useDebounceFn(printMessage, 2000)
debouncedPrint()
// 假设过了 1000 毫秒，我们决定取消防抖
debouncedPrint.cancel()
// 即使再过 1000 毫秒，printMessage 函数也不会执行

通过 Vueuse 的 `useDebounceFn` 函数，我们可以很方便地在 Vue 3 项目中实现防抖功能，它不仅可以用于处理用户输入、窗口事件等常见场景，还提供了丰富的选项（如 `immediate`）和方法（如 `cancel`）来满足不同的需求，合理使用防抖技术，可以有效提升应用的性能和用户体验，避免不必要的函数调用和资源浪费，希望本文对你理解和使用 Vueuse 中的防抖功能有所帮助。