vue 2自定义指令节流

在Vue 2中，我们可以通过自定义指令来实现节流的功能。节流是指在一段时间内，只执行一次指令所绑定的回调函数，避免频繁触发事件导致性能问题。

首先，我们可以创建一个自定义指令throttle，用于实现节流的逻辑。在Vue实例中，我们可以通过全局注册自定义指令的方法Vue.directive()来定义这个指令。

在定义throttle指令时，我们可以接收三个参数，分别是元素节点、绑定的值和参数对象。其中，元素节点通过binding.value获取，绑定的值可以通过binding.arg获取，参数对象可以通过binding.modifiers获取。

接下来，在自定义指令的bind钩子函数中，我们可以使用lodash库中的throttle函数来实现节流功能，例如：

import throttle from 'lodash/throttle';

Vue.directive('throttle', {
  bind: function (el, binding) {
    const callback = binding.value;
    const wait = binding.arg || 300;
    const options = binding.modifiers;

    el.throttledCallback = throttle(callback, wait, options);
    el.addEventListener('input', el.throttledCallback);
  },
  unbind: function (el) {
    el.removeEventListener('input', el.throttledCallback);
    delete el.throttledCallback;
  }
});

在上述代码中，我们使用lodash库中的throttle函数来创建一个节流后的回调函数el.throttledCallback，并将其绑定到元素节点的input事件上。同时，我们可以通过binding.arg来指定节流的时间间隔，默认为300毫秒。另外，我们还可以通过binding.modifiers来传递其他参数，例如{leading: false}可以控制第一次触发事件时是否立即执行回调函数。

最后，在Vue模板中，我们可以通过v-throttle指令来使用自定义的节流指令，例如：

<template>
  <input v-throttle="handleInput" arg="300" modifier1 modifier2 />
</template>

在上述代码中，将handleInput方法绑定到input元素上，并传递了arg参数和modifiers修饰符。

通过以上的步骤，我们可以使用自定义指令来实现Vue 2中的节流功能，从而避免频繁触发事件导致的性能问题。