VUE handler内防抖处理

watch监听数组或者复杂对象时，handler:function(){内部方法频繁触发}

解决方案

参考了很多篇大神的文章，总结方法及踩坑经历
使用 lodash 工具库中的 debounce 防抖函数

踩坑经历：

• 该 debounce 防抖函数要求包裹的是需要防抖、频繁触发的函数，即冒号后面的整个内容都需要进行防抖，如果 debounce防抖函数是写在 function (newVal,oldVal) { } 的里面，由于 function (newVal,oldVal)
  { } 整个部分（包括里面的内容）都是频繁触发的，就会造成里面的 debounce 防抖函数被多次调用，生成多个作用域

• handler: val => {
  if (val) {
  console.log(this)
  }}
  此时this是undefined
  原因：
  箭头函数绑定了父级作用域的上下文，从而不会拿到Vue实例。所以在使用watch设置监听的时候，handler函数不应该使用箭头函数。

• 事件防抖

 <template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  created() {
    this.debouncedHandler = debounce(event => {
      console.log('New value:', event.target.value);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedHandler.cancel();
  }
};
</script>

为什么不在method中写好方法，在template中直接调用，就像这样

<template>
  <input v-on:input="debouncedHandler" type="text" />
</template>
<script>
import debounce from "lodash.debounce";
export default {
  methods: {
    // Don't do this!
    debouncedHandler: debounce(function(event) {
      console.log('New value:', event.target.value);
    }, 500)
  }
};
</script>

组件使用 export default { … } 导出的 options 对象，包括方法，会被组件实例重用。

如果网页中有 2 个以上的组件实例，那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。

实际开发正确使用方式：

1.安装

npm i --save lodash.debounce

2.引入

import debounce from 'lodash.debounce'

3. 使用
   两种方式

handleInput: debounce(function (val) {
      console.log(val)
    }, 200)

handleInput(val) {
      console.log(val)
    }

  created() {this.handleInput = debounce(this.handleInput, 200) // 搜索框防抖
  }