Vue3 setup函数中使用lodash的_.throttle节流功能失效如何解决？

你的写法存在两个核心问题导致节流失效：

• 每次点击触发handleClick时，才会调用_.throttle生成一个全新的节流函数，不同节流实例之间不会共享计时状态，相当于每次点击都是独立调用，无法触发节流逻辑。
• 你当前的写法中，点击事件仅执行了handleClick得到节流函数，并没有调用这个返回的节流函数，目标逻辑console.log('hi')甚至不会执行。

直接在setup执行阶段生成唯一的节流函数实例赋值给handleClick即可，setup在组件生命周期内仅执行一次，生成的节流函数会全局共享计时状态，节流即可正常生效。同时建议在组件卸载时调用节流实例的cancel方法清理定时器，避免内存泄漏。

修正后代码如下：

<template>
  <div id="app">
    <button @click="handleClick">Click</button>
  </div>
</template>

<script>
import _ from 'lodash';
import { onUnmounted } from 'vue';

export default {
  name: 'App',
  setup() {
    // 初始化阶段直接生成唯一的节流函数
    const handleClick = _.throttle(function () {
      console.log('hi');
    }, 2000);

    // 组件卸载时清理节流实例
    onUnmounted(() => {
      handleClick.cancel();
    });

    return {
      handleClick,
    };
  },
};
</script>

如果需要给点击事件传递参数，直接在节流函数的形参中接收即可：

const handleClick = _.throttle((id) => {
  console.log('接收的参数id：', id);
}, 2000);

模板中正常传参调用即可：

<button @click="handleClick(1)">传参点击</button>

内容的提问来源于stack exchange，提问作者wutai