在表单中，输入框的输入一般伴随着接口请求，为了避免服务端压力过大，可进行防抖处理

在vue中可采用自定义指令的方式

/***
     * 防抖 单位时间只触发最后一次
     * @param {?Number|300} type - 当前元素类型
     *  @param {Function} fn - 执行事件
     *  @param {?String|"click"} event - 事件类型 例："keydown"
     *  @param {?Number|300} time - 间隔时间
     *  @param {Array} binding.value - [fn,event,time]
     *  例：<el-input v-debounce="[queryList,`keydown`,300]" />
     *  也可简写成：<el-input v-debounce="[queryList]" />
     *  queryList 函数中 可以拿到输入的值，进行接口请求
     *  例：async queryList(Val) { await xxx(val) }
     */
    Vue.directive('debounce', {
      inserted: function (el, binding) {
        let [type = "input", fn, event = "keydown", time = 300] = binding.value
        const targetEl = el.getElementsByTagName(type)[0];
        let timer
        targetEl.addEventListener(event, () => {
          timer && clearTimeout(timer)
          timer = setTimeout(() => fn(targetEl?.value), time)
        })
      }
    });