自定义指令实现按钮防抖

最新推荐文章于 2025-04-18 15:01:54 发布

原创最新推荐文章于 2025-04-18 15:01:54 发布 · 799 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

本文介绍了如何在Vue项目中创建一个防抖自定义指令，通过`debounce`函数管理和优化滚动事件或输入框搜索等频繁触发的行为，提高代码可维护性。步骤包括创建`debounce`逻辑、统一注册自定义指令并将其应用到`main.js`中。

项目中经常会遇到防抖这个场景，比如，页面滚动事件；输入框自动搜索等。为了方便统一管理，提高项目代码的可维护性。我们可以利用Vue的自定义指令完成这个功能。

自定义指令

生命周期/钩子函数

自定义指令拥有自身的生命周期，如下所示：

created(el,binding,vnode,preNode){}   // 在绑定元素的属性之前 
beforeMounted(el,binding,vnode,preNode) {}  //在被插入到Dom前调用
mounted(el,binding,vnode,preNode){}   //在绑定他的父组件和他所有的子组件都挂载完毕后调用
beforeUpdate(el,binding,vnode,preNode) {} //在绑定的父元素更新前调用
updated(el,binding,vnode,preNode) {}  //在绑定元素的父组件及它的所有子组件都更新完成后调用
beforeUnmount(el,binding,vnode,preNode) {}  //绑定元素的父组件卸载前调用
unmounted(el,binding,vnode,preNode) {} //绑定元素的父组件卸载后调用

生命周的参数

el：指令绑定到的元素。可以用于直接操作DOM
binding：一个对象包含如下属性。
value：传递给指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。
arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 “foo”。
modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。
instance：使用该指令的组件实例。
dir：指令的定义对象。
vnode：代表绑定元素的底层 VNode。
prevNode：代表之前的渲染中指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

步骤

1. 在项目utils文件夹中新增debounce.js文件

在文件中编写防抖的逻辑代码

export const debounce = {
  //ES6中对象中的方法可以直接写，不用写属性名
  mounted(el, binding) {
    console.log(el, binding)
    const doHandler = () => {
      let timer = null
      return function () {
        if (timer) {
          clearTimeout(timer)
        }
        timer = setTimeout(() => {
          binding.value.handler()
        }, binding.value.delay);
      }
    }
    el.addEventListener('click', doHandler())
  },
}

2.在utils文件夹下新建directives.js文件

在此文件中引入项目中所有自定义指令，并将它们统一注册。

import {debounce} from './debounce'

const directivesObj = {
    debounce
}

const directives = {
//使用Vue的install方法统一注册自定义指令。
    install(Vue) {
        Object.keys(directivesObj).forEach(key => {
            Vue.directive(key,directivesObj[key])
        })
    }
}

export default directives

3.在main.js中使用指令

import directives from './util/directives'
const app = createApp(App)
console.log(directives)
//使用install方法注册的对象可以通过app.use()来使用
app.use(directives)