vue2和vue3中使用debounce防抖

在项目中，有个按钮是入组操作，如果不对按钮做防抖限制，在列表中就会增加很多重复数据，所以，本篇文章就是结合lodash里的debounce进行防抖处理。

vue2使用思路

1.引入lodash 2.在create里将按钮事件绑定 3.真实事件处理逻辑

<a-button
    type="primary"
    @click="toJumpPageDebounce"
>
      跳转
</a-button>
……
import _ from 'lodash';
……
created() {
    this.toJumpPageDebounce = _.debounce(this.toJumpPage, 1000); // 防抖 1s
},
……
methods: {

    toJumpPage() {
         你的事件逻辑代码块
    },
}

vue3使用思路

1.引入lodash 2.直接在事件里使用debounce方法

情况1

<a-button
    type="primary"
    @click="toJumpPageDebounce"
>
      跳转
</a-button>
……
import { debounce } from 'lodash';
……
const toJumpPageDebounce = debounce(toJumpPage, 1000);  //防抖1s
……
function toJumpPage() {
     你的代码逻辑
}

情况2

<a-button
    type="primary"
    @click="toJumpPageDebounce"
>
      跳转
</a-button>
……
import { debounce } from 'lodash';
    const toJumpPageDebounce = debounce(async () => {
      你的代码逻辑
    }, 500);
    toJumpPageDebounce();

这是vue2和3使用防抖的一些不同点，是自己的工作总结，也希望对大家有所帮助。