vue全局註冊自定義指令防抖解析

export default (vue) => {
  /**
   * 綁定方法
   * @param {Object} el - The element the directive is bound to.
   * @param {Object} binding - An vue directive object
   */
   vue.directive('debounce', { //防抖函數指令
      inserted: function(el, binding) {
        let timer;
        el.addEventListener("click", () => {
          if (timer) {
            clearTimeout(timer);
          }
          timer = setTimeout(() => {
          //關鍵點:vue 的自定義指令傳遞的參數binding 如果是一個函數,則通過      binding.value()來執行,通過上述示例,還可以傳遞比如事件, 綁定對象之類的
            binding.value();
          }, 1000);
        });
      }
   })
}

import Debounce from './directives/debounce.js' //防抖自定義指令
Debounce(Vue)

v-debounce="getTableData"

function debounce(fn, immediate = true) {
  let timer;
  return function () {
    if (timer) clearTimeout(timer);
    if (immediate) {
      let bool = !timer;
      timer = setTimeout(() => (timer = 0), 300);
      return bool && fn.apply(this, [...arguments]);
    }
    timer = setTimeout(() => fn.apply(this, [...arguments]), 300);
  };
}
export default {
  debounce,
};

import utils from "./utils/index";
methods:{
    // 手動添加debounce
    btnHandler1: utils["debounce"](function (...rest) {
      console.log("2222 ", this, rest);
    }),
}

import Vue from 'vue'
// ctx 【context 上下文 綁定this指向】
const debounce = (func, time, ctx, immediate = true) => {
  let timeout
  return function (...params) {
    if (timeout) clearTimeout(timeout)
    if (immediate) {
      var callNow = !timeout
      timeout = setTimeout(() => {
        timeout = null
      }, time)
      if (callNow) func.apply(ctx, params)
    } else {
      timeout = setTimeout(function () {
        func.apply(ctx, params)
      }, time)
    }
  }
}
// 隻能綁定一個組件，多個組件無法綁定
Vue.component('Debounce', {
  abstract: true,//抽象組件，無狀態，
  props: ['time', 'events', 'immediate'],
  created () {
    this.eventKeys = this.events && this.events.split(',')
    this.originMap = {}
    this.debouncedMap = {}
  },
  render () {
    // 組件使用proxy對象包裝，可以瞭解 【this】；
    // 取出虛擬節點，默認第一個，也就是高階組件中若傳遞瞭多個子組件，隻展示第一個
    const vnode = this.$slots.default[0]
    // 如果默認沒有傳 events，則對所有綁定事件加上防抖
    if (!this.eventKeys) {
      this.eventKeys = Object.keys(vnode.data.on)
    }
    this.eventKeys.forEach((key) => {
      const target = vnode.data.on[key]
      if (target === this.originMap[key] && this.debouncedMap[key]) {
        vnode.data.on[key] = this.debouncedMap[key]
      } else if (target) {
        this.originMap[key] = target
        this.debouncedMap[key] = debounce(target, this.time, vnode, this.immediate)
        vnode.data.on[key] = this.debouncedMap[key]
      }
    })
    return vnode
  }
})

    <Debounce events="click" time="300">
      <button @click="clickHandler(1,2,3)" :btnval="'val'">click1</button>
    </Debounce>

// 指令【防抖】
Vue.directive("debounce", {
  // 隻調用一次，第一次綁定元素時調用
  // el【綁定的元素】，binding【一個相關對象】，vnode【vue編譯生成的虛擬節點】
  // beforemount之後，mounted之前；
  // init events&lifecycle 【初始化事件和生命周期】
  bind(el, binding, vnode, oldVnode) {
    console.log(el, binding, vnode, oldVnode);
    let { value } = binding;
    let [target, time] = value;
    const debounced = debounce(target, time, vnode);
    el.addEventListener("click", debounced);
  },
  // 被綁定元素插入父節點時調用(僅保證父節點存在，但是不一定插入文檔)
  inserted() {},
  // 所在組件的vnode更新時調用
  update() {},
  componentUpdated() {},
  unbind(el) {
    console.log(el, "el");
    el.removeEventListener("click", el._debounced);
  },
});

使用
 	<button
      v-debounce="[
        () => {
          btnHandler();
        },
        300,
      ]"
    >
      點擊
    </button> 
    <button v-if="testcom" v-debounce="[btnHandler, 300]">點擊</button>