vue中使用 lodash Debounce防抖不生效原因_lodash debounce不生效

最近项目需要做这样一个需求：基于element-ui框架的vue项目，输入input框实现实时搜索后台响应的数据。但用户每次按下键盘就发送请求会导致系统性能不好等问题，这时需要考虑到用防抖去解决这个问题。所以我考虑使用输入框监听+lodash库https://www.lodashjs.com/docs/lodash.debounce的防抖来实现。

步骤简单：首先引入+使用

import {debounce} from 'lodash';
1

<el-form-item label="" prop="">
   <el-input
       placeholder=""
       v-model="formData.keyword"
       @input.native="change"      //注意使用elementUI组件要加上.native
   ></el-input>
 </el-form-item>
1
2
3
4
5
6
7

methods:{
	change:
	    debounce(()=>{
	      console.log(1111);
	      //todo
	    }, 500),
	//下面这种方式是不可行的，debounce返回了一个函数
	changes(){
      debounce(function(){
        console.log(1111)
      }, 500)      
    },
 }
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

这里要特别注意函数change的写法，必须这种change: 的写法，如果要使用change()要使用调用的方式，但最终有调用debounce的函数还是要另一种写法。

 @keyup.native="search"></el-input>
1

methods: {  
      // 加载到原型链上的lodash，在getRemote后取不到
    // 注意，这里debounce中的第一个参数，不能写成箭头函数，否则，取不到this
   getRemote: _.debounce(function () {
     console.log(111)
   }, 1000),
   search () {
     this.getRemote()
   }
 }

1
2
3
4
5
6
7
8
9
10
11

vue3中也有提及debounce的使用，感兴趣的可以去看看~
https://v3.vuejs.org/guide/data-methods.html#methods