Vue定制指令：深度解析防抖与节流的实现

vue2 项目初始化

vue2 项目初始化 安装Vue/Cli npm安装

npm i -g @vue/cli

创建Vue项目

vue create vue-project

简介

自定义指令 什么是自定义指令 vue 官方提供了 v-text、v-for、v-model、v-if 等常用的指令。除此之外 vue 还允许开发者自定义指令。

防抖是指当频繁触发一个事件,它的回调不会立即执行,而是在 n 秒之后执行,但当在这 n 秒之内你又触发了这个事件,则会重新计时,也就是你还需要再等 n 秒才会执行。 平常我们在写按钮的时候多次点击可能会调用多次接口，这时候我们就可以使用防抖来处理

节流是指当频繁触发一个事件,它会立刻执行回调,但是如果你在 n 秒之内再次触发,回调不再执行,也就是说单位时间内触发事件只会执行一次回调单位时间内第一次

在Vue2中，你可以通过自定义指令来实现防抖（debounce）和节流（throttle）的功能。

防抖

首先，我将为你提供自定义防抖指令的代码示例： 你可以在使用该指令时设置参数以指定延迟时间和事件，默认为300毫秒、input事件。

<--main.js-->
// 防抖指令
Vue.directive('debounce', {
  inserted: function (el, binding) {
    console.log(binding)
    let timer = null;
    let [fn, event = "input", delay = 300] = binding.value
    el.addEventListener(event, () => {
      // ‘与’逻辑运算符-遇假则假 遇真会继续往后找--这边没有用if判断
      //-逼格大大提高了呢
      timer && clearTimeout(timer)
      timer = setTimeout(fn, delay)
    })
  }
})

节流

接下来是自定义节流指令的代码示例：

<--main.js-->
// 节流指令
Vue.directive('throttle', {
  inserted: function (el, binding) {
    let [fn, event = "click", delay = 300] = binding.value
    let timer = null;
    el.addEventListener(event, () => {
      if (!timer) {
        timer = setTimeout(() => {
          clearTimeout(timer);
          timer = null;
          fn();
        }, delay);
      }
    })
  }
})

以上代码示例可以根据需要进行修改和扩展，你可以将其添加到Vue应用中，并在模板中使用这些自定义指令。例如：

<--App.vue-->
<template>
  <div>
    <input v-debounce="[handleInput,`input`,2000]" type="text" placeholder="输入内容触发防抖">
    <button v-throttle="[handleClick,`click`,2000]">点击触发节流</button>
  </div>
</template>
​
<script>
export default {
  methods: {
    handleInput() {
      // 处理输入事件
      console.log('输入');
    },
    handleClick() {
      // 处理点击事件
      console.log('点击');
    }
  }
}
</script>
​

vue 使用 lodash 防抖，节流

//安装 lodash.debounce
npm i --save lodash.debounce

<--App.vue-->
<script>
//引入代码 
import debounce from 'lodash.debounce'
export default {
  methods: {
   handleInput: debounce(function (e) {
             console.log('输入');
        },1000)
  }
}
</script>

自定义一个修改文字颜色的指令

<--main.js-->
//简写的是bind和update这两个生命周期钩子
Vue.directive(
  'color',
  function (el, binding) {
    el.style.color = binding.value
  }
)

<--App.js-->
<template>
    <div>
        <button v-color="this.color" @click="changeColor">我是一段文字</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            color: 'red'
        };
    },
    methods: {
        changeColor() {
            this.color = this.getRandomColor()
        },
        // 生成随机颜色
        getRandomColor() {
            var letters = '0123456789ABCDEF';
            var color = '#';
            for (var i = 0; i < 6; i++) {
                color += letters[Math.floor(Math.random() * 16)];
            }
            return color;
        }
    },

};
</script>