vue3使用防抖和节流

最新推荐文章于 2025-10-30 15:21:35 发布

原创最新推荐文章于 2025-10-30 15:21:35 发布 · 6k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#vue #js #javascript

vue3学习专栏收录该内容

9 篇文章

订阅专栏

Vue 没有内置支持防抖和节流，但可以使用 Lodash 等库来实现。

安装Lodash

 yarn add lodash
 npm install lodash --save

导入Lodash

<template>
  <button @click="btnClick">节流</button>
  <button @click="btnClick2">防抖</button>
</template>

<script>
import _ from "lodash";

export default {
  name: "",
  setup() {
    // 节流
    const btnClick = _.debounce(function() {
      // ....
      console.log('节流');
    }, 2000);
    // 防抖
    const btnClick2 = _.throttle(function() {
      // ....
      console.log('防抖');
    }, 2000);
    return {
      btnClick,
      btnClick2,
    };
  },
};
</script>

<style scoped></style>

但是，这种方法对于可复用组件有潜在的问题，因为它们都共享相同的防抖函数。为了使组件实例彼此独立，可以在生命周期钩子的 created 里添加该防抖函数:

app.component('save-button', {
  created() {
    // 用 Lodash 的防抖函数
    this.debouncedClick = _.debounce(this.click, 500)
  },
  unmounted() {
    // 移除组件时，取消定时器
    this.debouncedClick.cancel()
  },
  methods: {
    click() {
      // ... 响应点击 ...
    }
  },
  template: `
    <button @click="debouncedClick">
      Save
    </button>
  `
})