项目中经常会遇到防抖这个场景，比如，页面滚动事件；输入框自动搜索等。为了方便统一管理，提高项目代码的可维护性。我们可以利用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文件
在文件中编写防抖的逻辑代码文章来源：https://www.toymoban.com/news/detail-809938.html
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文件
在此文件中引入项目中所有自定义指令，并将它们统一注册。文章来源地址https://www.toymoban.com/news/detail-809938.html
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)
到了这里，关于自定义指令实现按钮防抖的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
