节流：

当持续触发事件时，保证一定时间段内只调用一次事件处理函数。

防抖 ：

当连续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了事件，就重新开始延时

项目在开发过程中，防止重复提交或者重复跳转页面
我们可以自己定义一个指令通过节流的方式去处理。
自定义指令，通过在标签原型上面绑定状态的方式，控制是否可以重复点击

下面是实现逻辑

首先在新建一个preventReClick.js文件

export default {
    install(Vue) {
        // 防重复点击(指令实现)
        Vue.directive('preventReClick', {
            inserted(el, binding) {
                el.addEventListener('click', () => {
                    if (!el.disabled) {
                        el.disabled = true
                        setTimeout(() => {
                            el.disabled = false
                        }, binding.value || 3000)
                    }
                })
            }
        })
    }
}

将js文件引入至main.js，并使用

import install from './preventReClick'
Vue.use(install)

给要防止重复点击的按钮加上指令v-preventReClick

<template>
  <div class="page" ref="page">
    <div @click="$event.currentTarget.disabled ? '' : clickFun()" v-preventReClick>点击这里</div>
  </div>
</template>

vue 双击事件在移动的端没有效果，通过点击事件+时间判断是单击事件还是双击事件

<script>
<template>
  <div class="page" ref="page">
    <div @click="clickFun">
      点击双击
    </div>
    <div @click="clickFun1">
      点击双击
    </div>
  </div>
</template>

export default {
  name: "Home",
  data() {
    return {
      clickTtime: new Date().getTime()
    };
  },
  methods: {
    clickFun(){
   
      if( new Date().getTime() - this.clickTtime < 500 ){
          console.log("双击");
      }else{
          this.clickTtime = new Date().getTime();
          console.log("单机")
      }
   
    },
    clickFun1(){
      let delta = Date.now() - this.clickTtime; //计算两次点击时间差
      this.clickTtime = Date.now();
      console.log(delta)
      if (delta > 0 && delta <= 250) { //双击事件
          console.log('双击事件')
      } else { //滑动事件
          console.log('单击事件')
      }

    }
  }
};
</script>