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

最新推荐文章于 2025-10-09 06:20:07 发布

原创最新推荐文章于 2025-10-09 06:20:07 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue

Vue2.x 同时被 2 个专栏收录

23 篇文章

订阅专栏

15 篇文章

订阅专栏

本文展示了在Vue组件中如何利用lodash库的debounce和throttle方法，为输入事件绑定的函数添加防抖和节流功能，以优化性能。在模板中，对Input元素的`@input`事件绑定调用了`debounceUpdate`方法，该方法在组件挂载后被设置为防抖函数，延迟500毫秒执行更新操作。

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) // 添加防抖函数
  },