vue如何实现节流与防抖

节流和防抖是前端开发中常用的优化技术，用于控制事件触发的频率。在Vue中，可以通过自定义指令来实现节流和防抖的效果。

1. 节流：在一定时间间隔内只执行一次事件处理函数。可以使用Lodash库中的throttle函数来实现节流效果。首先，安装Lodash库：

npm install lodash

然后，在Vue组件中使用自定义指令来实现节流效果[^1]：

// 引入Lodash库
import _ from 'lodash';

// 注册节流指令
Vue.directive('throttle', {
  inserted: function (el, binding) {
    el.addEventListener('click', _.throttle(binding.value, 1000));
  }
});

在模板中使用v-throttle指令来绑定节流事件[^1]：

<button v-throttle="handleClick">点击按钮</button>

2. 防抖：在事件触发后等待一段时间，如果在这段时间内再次触发事件，则重新计时。可以使用Lodash库中的debounce函数来实现防抖效果。同样地，首先安装Lodash库：

npm install lodash

然后，在Vue组件中使用自定义指令来实现防抖效果[^2]：

// 引入Lodash库
import _ from 'lodash';

// 注册防抖指令
Vue.directive('debounce', {
  inserted: function (el, binding) {
    el.addEventListener('input', _.debounce(binding.value, 1000));
  }
});

在模板中使用v-debounce指令来绑定防抖事件[^2]：

<input v-debounce="handleInput" type="text" placeholder="输入内容">