二、vue 自定义命令实现节流、防抖

vue自定义命令实现节流、防抖–实现

/*
 * @Author: hangysx
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 22:14:13
 * @Description: 节流、防抖自定义指令
 */
import Vue from 'vue'

// 节流
const throttle = {
  install(Vue) {
    Vue.directive('throttle', {
      bind(el, binding) {
        const [fn, event = 'click', delay = 2000] = binding.value
        let timer = null
        el.addEventListener(event, () => {
          if (timer) return
          timer = setTimeout(() => {
            fn()
            timer = null
          }, delay)
        })
      }
    })
  }
}

// 防抖
const debounce = {
  install(Vue) {
    /**
     * vue 3.2的命令钩子
      Vue.directive('debounce', {
        // 当前元素上的事件(click)调用前 触发
        create(el, binding) { console.log(binding) },
        // dom未挂载之前调用S
        beforeMount(el, binding) { console.log(22222222222) },
        // dom挂载后调用
        mounted(el, binding) { console.log(333333333333333) },
        // 绑定的dom更新前调用
        beforeUpdate(el, binding) { console.log(444444444444444) },
        // 绑定的dom更新后调用
        update(el, binding) { console.log(binding) },
        // dom卸载前
        beforeUnmount(el, binding) { console.log(6666666666666666) },
        // dom被卸载后触发。只调用一次
        unmount(el, binding) { console.log(7777777777777) }
      })
    */

    // fn: 执行事件  event：事件类型  delay：时间间隔  
    // vue 3.2之前
    Vue.directive('debounce', {
      bind(el, binding) {
        const [fn, event = 'click', delay = 1000] = binding.value
        let timer = null
        el.addEventListener(event, () => {
          timer && clearTimeout(timer)
          timer = setTimeout(() => {
            fn()
            timer = null
          }, delay)
        })
      }
    })
  }
}

Vue.use(throttle)
Vue.use(debounce)

export {
  debounce,
  throttle
}

自定义命令使用方法

一、src下最好创建一个公共文件

// 例子
<div v-throttle='[test, click, 100]'></div>
methods: {
	test() {
		xxxxx
	}
}