Vue中使用lodash防抖（debounced）&节流（throttle）

Vue中使用lodash防抖（debounced）&节流（throttle）

废话不多说，直接上代码。

<template>
  <div class="label-container">
    <div style="flex: 1 1 auto">
      <Form ref="label-form" :model="formItem">
        <div
          v-for="(label, index) in formItem.labels"
          :key="index"
          style="position:relative; width:100%"
        >
          <li class="form-line">
            <FormItem :prop="'labels.' + index + '.key'" :rules="rules.key">
              <Input
                v-model="label.key"
                placeholder="eg. key"
                @input="debounceUpdate"
              />
            </FormItem>
            <FormItem :prop="'labels.' + index + '.value'" :rules="rules.value">
              <Input
                v-model="label.value"
                placeholder="eg. value"
                @input="debounceUpdate"
              />
            </FormItem>
          </li>
        </div>
      </Form>
    </div>
  </div>
</template>

<script>
import { debounce } from 'lodash'

export default {
  name: 'label-item',
  props: {
    required: { type: Boolean, default: false },
    value: { type: Object, default: () => {} },
    cluster: { type: String, default: '' },
    namespace: { type: String, default: '' },
    type: { type: String, default: '' }
  },
  data() {
    return {
      debounceUpdate: () => {}
    }
  },
  mounted() {
    this.debounceUpdate = debounce(this.update, 500) // 添加防抖函数
  },

加载到原型链上的lodash，在Vue的函数中后取不到，因为lodash-debounce中的第一个参数，不能写成箭头函数，且取不到this。

初始化时在data中声明，挂载完后再将debounce赋值给debounceUpdate即可