项目中经常会遇到防抖这个场景，比如，页面滚动事件；输入框自动搜索等。为了方便统一管理，提高项目代码的可维护性。我们可以利用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)
  

   
   微信网站制作教程  简易东莞网站制作公司  毕业设计论文网站  学ui设计网站  网络推广  b2b平台有哪些