vue3 防抖|极客教程

vue3 防抖

在前端开发中，经常会遇到一些需要频繁触发的事件，例如input的输入事件、scroll的滚动事件等。如果在事件被频繁触发的情况下，不做任何处理，可能会导致页面性能下降，甚至出现意料之外的bug。因此，为了避免这种情况的发生，我们通常会使用防抖函数来限制事件的频率。

防抖的思想是，当事件被触发后，不立即执行事件处理函数，而是等待一定的时间间隔，如果在这个时间间隔内再次触发了事件，则重新计时。只有在事件停止触发一段时间后，才会执行事件处理函数。

在Vue3中，我们可以通过自定义指令的方式来实现防抖功能。接下来，我们将详细介绍如何在Vue3中实现防抖。

实现防抖指令

首先，我们需要在Vue3项目中创建一个名为debounce.js的文件，用来存放我们的防抖指令代码。

// debounce.js

import { Directive } from 'vue'

const directive = {
  beforeMount(el, binding) {
    let timer
    el.addEventListener('input', () => {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout(() => {
        binding.value()
      }, 500) // 这里设置防抖的时间间隔为500ms，可根据实际情况自行调整
    })
  }
}

export default directive

在上面的代码中，我们定义了一个名为debounce的指令，该指令在绑定到元素上后会监听元素的input事件，并在事件触发后进行防抖处理。我们设置防抖的时间间隔为500ms，你也可以根据实际情况自行调整。

接下来，我们需要在Vue3项目中注册这个自定义指令。

// main.js

import { createApp } from 'vue'
import debounce from './debounce'

const app = createApp(App)
app.directive('debounce', debounce)
app.mount('#app')

在上面的代码中，我们将自定义指令debounce注册到Vue实例中，并在App组件中使用。

<!-- App.vue -->

<template>
  <input v-debounce="handleInput" />
</template>

<script>
export default {
  methods: {
    handleInput() {
      console.log('debounce')
    }
  }
}
</script>

在App.vue组件中，我们通过v-debounce指令将handleInput方法绑定到input元素上。当input事件被触发时，会执行handleInput方法，并进行防抖处理。在控制台中会打印出debounce，表示防抖函数正常工作。