vue 防抖节流

防抖：在短时间内多次触发同一事件时，只执行一次函数。也就是说，当事件被触发后，会等待一段时间，如果这段时间内没有再次触发该事件，才会执行事件处理函数。如果在这段时间内又触发了该事件，则等待一段时间后再执行，并以此类推。

html
<template>
  <div>
    <input type="text" v-model="keyword" @input="handleInput" />
    <p>当前输入的关键字为：{{ keyword }}</p>
  </div>
</template>

<script>
import { debounce } from 'lodash';

export default {
  data() {
    return {
      keyword: ''
    };
  },
  methods: {
    handleInput: debounce(function() {
      console.log(`搜索关键字：${this.keyword}`);
      // 处理搜索逻辑
    }, 500)
  }
};
</script>

在上述示例代码中，我们通过 Lodash 的 debounce 方法，将 handleInput 函数包装成了一个防抖函数，指定了 500 毫秒的等待时间。这意味着，用户在输入框中输入时，只有当停止输入 500 毫秒后才会执行搜索逻辑。

节流：当一个事件被触发时，在一定时间范围内只执行一次函数。也就是说，当事件被触发后，会在一定时间内先执行该事件处理函数，并在这段时间内屏蔽其他事件。如果在这段时间内又触发了该事件，则不会被处理，直到这段时间过去后，才会再次执行该事件处理函数。

示例代码：

<template>
  <div>
    <button @click="handleClick">点我</button>
    <p>当前点击次数为：{{ count }}</p>
  </div>
</template>

<script>
import { throttle } from 'lodash';

export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    handleClick: throttle(function() {
      this.count++;
    }, 1000)
  }
};
</script>