Vue使用lodash的debounce进行防抖并赋值data值

远程模糊搜索select下拉项时，为了避免输入时过多的请求，在vue中添加优化防抖功能，但是中间遇到了两个问题：
1.防抖不起作用，根本不delay，最终发现是函数声明方式导致；
2.因为箭头函数里this指向问题，无法给data中的变量赋值，最终通过先获得顶层this域，再赋值解决。

上代码：

 1 <template>
 2 <!--省略-->
 3      <a-select
 4        showSearch
 5        allowClear
 6        :value="department"
 7        :defaultActiveFirstOption="false"
 8        :showArrow="false"
 9        :filterOption="false"
10        @search="val => handleSearch('department', val)"
11        @change="val => handleChange('department', val)">
13            <a-select-option
14             v-for="d in departmentList"
15             :key="d"
16             >{{ d }}</a-select-option
17            >
18      </a-select>
19 <!--省略-->
20 </template>
21 import { queryAsset } from '@/api/toolset'
22 import _ from 'lodash'
23 let _this = {}
24 <script>
25 export default {
26 data() {
27         return {
28             departmentList: [],
29             department: ''
46         }
47     },
48    
49     beforeCreate() {
50         _this = this
51     },
52     methods: {
53         handleSearch: _.debounce((key, val) => {
54             let p = { [key]: val }
55             queryAsset(p).then(res => {
56                 switch (Object.keys(p)[0]) {
57                     case 'department':
58                         _this.departmentList = res.data
59                         break
60                     //省略
69                 }
70             })
71         }, 500),
72 
73         handleChange(key, val) {
74             switch (key) {
75                 case 'department':
76                     this.department = val
77                     break
78                 //省略
87             }
88         },
89   //省略
90   }
91 }
92 </script>

使用箭头函数的方式，防抖函数才可以生效。

原因解释：

https://stackoverflow.com/questions/53041171/lodashs-debounce-not-working-in-vue-js