vue使用lodash中debounce(防抖函數)的幾種方法實現

更新時間：2025年02月12日 09:23:11 作者：晚時之秋

本文主要介紹了vue使用lodash中debounce(防抖函數)的幾種方法實現,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧

1、安裝

npm i --save lodash.debounce

2、引入

import debounce from 'lodash.debounce'

3、使用

<van-search v-model="searchValue" placeholder="輸入姓名或工號" @input='handleInput' />

第一種：

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

第二種：

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

這兩種使用方式效果一樣

觀察者防抖：

<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
import debounce from "lodash.debounce";
export default {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(...args) {
      this.debouncedWatch(...args);
    },
  },
  created() {
    this.debouncedWatch = debounce((newValue, oldValue) => {
      console.log('New value:', newValue);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedWatch.cancel();
  },
};
</script>

事件處理器防抖：

<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 — 這會導致防抖出現故障。

到此這篇關于vue使用lodash中debounce(防抖函數)的幾種方法實現的文章就介紹到這了,更多相關vue debounce防抖內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: