【vue】vue中使用lodash的debounce防抖函数

夏兮颜☆

已于 2025-01-07 15:09:28 修改

阅读量3k

点赞数 13

CC 4.0 BY-SA版权

文章标签： vue.js javascript ecmascript

于 2023-12-27 13:50:12 首次发布

本文链接：https://blog.csdn.net/m0_69892739/article/details/135243538

本文介绍了如何在Vue项目中使用lodash的防抖函数debounce，以减少频繁事件下的重复操作，提供更好的用户体验。同时提到在组件销毁时需取消防抖以防止内存泄漏。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录标题

防抖函数 debounce 指的是某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。假如我们设置了一个等待时间 3 秒的函数，在这 3 秒内如果遇到函数调用请求就重新计时 3 秒，直至新的 3 秒内没有函数调用请求，此时执行函数，不然就以此类推重新计时。

在Vue中使用防抖函数可以避免在频繁触发的事件中重复执行操作。

第一步安装lodash

首先第一步我们用npm或者是yarn去进行下载安装lodash。

npm install lodash   或者 yarn add lodash

第二步

在需要用到的地方进行引用。引用方式如下：

import { debounce } from 'lodash';
或者
import _debounce from 'lodash/debounce';

举例一个简单的例子：

<template>
    <div>
        <input type="text" v-model="searchText" @input="searchDebounced" placeholder="请输入">
    </div>
</template>
   
<script>
// import { debounce } from 'lodash';
import _debounce from 'lodash/debounce';

export default {
    data() {
        return {
            searchText: '',
        };
    },
    methods: {
        // 防抖函数，延迟1000毫秒执行搜索操作
        searchDebounced: _debounce(function (val) {
            console.log(val)
            // xxx可以定义方法操作
        }, 1000),
    },
};
</script>
<style lang="scss" scoped></style>