Vue防抖和節流怎么使用

這篇文章主要介紹“Vue防抖和節流怎么使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue防抖和節流怎么使用”文章能幫助大家解決問題。

1. 觀察者 防抖

我們先從一個簡單的組件開始，我們的任務是 將用戶輸入到 文本框中的文本 輸出到控制臺:

<template>
<inputv-model="value"type="text" />
<p>{{ value }}</p>
</template>

<script>exportdefault {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(newValue, oldValue) {
      console.log("Value changed: ", newValue);
    }
  }
};
</script>

在 輸入框 敲幾個字符。每次輸入時，值就會被 log 到控制臺。

我們通過使用 觀察者（watcher） 監聽 value 數據屬性 來實現了打印日志。但如果你想在 觀察者的回調 中加入一個 使用 value 作為參數 的 GET 請求，那你應該不會期望太過頻繁地發起請求。

我們來對 打印控制臺日志 這個行為做一下 防抖。核心思想是創建一個 防抖函數，然后在 觀察者 內部調用該函數。

我在這里選擇了 'lodash.debounce' 的 防抖實現，但你可以自由選擇喜歡的實現方式。

我們來將 防抖邏輯 應用到組件：

<template>
<inputv-model="value"type="text" />
<p>{{ value }}</p>
</template>

<script>

import debounce from"lodash.debounce";
exportdefault {
  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>

但有一個區別：只有在最后一次輸入的 500ms 之后，才會將新的輸入值打印日志到控制臺。這說明 防抖 在生效。

觀察者 的 防抖實現 只需要 3 個簡單步驟：

在 create() 鉤子 里，創建 防抖回調，并將其賦值到實例上：this.debouncedWatch = debounce(..., 500)。

在 觀察者 回調 watch.value() { ... } 中 傳入正確的參數 調用 this.debouncedWatch()。

最后，beforeUnmount() 鉤子中 調用 this.debouncedWatch.cancel() ，在卸載組件之前，取消所有還在 pending 的 防抖函數執行。

采用同樣的方式，你可以對任意數據屬性的 觀察者 應用 防抖。然后就可以安全執行 防抖回調內部的一些比較重的操作，比如 網絡請求、繁重的 DOM 操作，等等。

2. 事件處理器 防抖

上面一節，我展示了如何對 觀察者 使用 防抖，那么常規的事件處理器呢？

我們重用之前用戶輸入數據到輸入框的例子，但這一次會給輸入框加個 事件處理器。

像往常一樣，如果你沒有采取任何緩沖的措施，每當值被修改時，會被打印到控制臺：

<template>
<inputv-on:input="handler"type="text" />
</template>

<script>
exportdefault {
  methods: {
    handler(event) {
      console.log('New value:', event.target.value);
    }
  }
};
</script>

在輸入框打幾個字符。看看控制臺：你會發現每次你輸入的時候就會有日志被打印出來。

同樣，如果你會執行一些比較重的操作（比如網絡請求），可就不合適了。

對 事件處理器 使用 防抖，可以參考下面這個：

<template>
<inputv-on:input="debouncedHandler"type="text" />
</template>

<script>

import debounce from"lodash.debounce";
exportdefault {
  created() {
    this.debouncedHandler = debounce(event => {
      console.log('New value:', event.target.value);
    }, 500);
  },
  beforeUnmount() {
    this.debouncedHandler.cancel();
  }
};
</script>

輸入一些字符。組件只有在最后一次輸入的 500ms 之后，才會將新的輸入值打印日志到控制臺。防抖 再一次生效了！

事件處理器 的 防抖實現 只需要 3 個步驟：

1.在 create() 鉤子 里，創建實例后，立刻將 防抖回調 debounce(event => {...}, 500) 賦值到 this.debouncedHandler 。

2.在輸入框的 template 中 給 v-on:input 賦上 debouncedHandler ：<input v-on:input="debouncedHandler" type="text" />

3.最后，在卸載組件之前， 在 beforeUnmount() 鉤子中 調用 this.debouncedHandler.cancel() ，取消所有還在 pending 的 函數調用。

另一方面，這些例子應用了 防抖 的技術。然而，同樣的方式可以以用于創建 節流函數。

3. 注意

你可能不理解：為什么不直接在 組件的 method 選項中創建 防抖函數，然后在 template 中調用這些方法作為事件處理器？

// ...
  methods: {
    // Why not?
    debouncedHandler: debounce(function () { ... }}, 500)
  }
// ...

這比在實例對象上創建 防抖函數 要簡單的多。

例如：

<template>
<inputv-on:input="debouncedHandler"type="text" />
</template>

<script>

import debounce from"lodash.debounce";
exportdefault {
  methods: {
    // Don't do this!debouncedHandler: debounce(function(event) {
      console.log('New value:', event.target.value);
    }, 500)
  }
};

</script>

這次不是在 created() 鉤子 里創建 防抖回調了，而是將 防抖回調 賦給了 methods.debouncedHandler 。

你如果試過 demo，你會發現是有效果的！

問題是，組件使用 export default { ... } 導出的 options 對象，包括方法，會被組件實例重用。

如果網頁中有 2 個以上的組件實例，那么所有的組件都會應用 相同 的防抖函數 methods.debouncedHandler &mdash; 這會導致防抖出現故障。

4. 總結

在 Vue 中，可以很輕松的對 觀察者 和 事件處理器 應用 防抖 和 節流。

核心邏輯就是，在 created() 鉤子 里，創建 防抖 或 節流 的回調，并賦值在實例上。

// ...created() {
    this.debouncedCallback = debounce((...args) => {
      // The debounced callback
    }, 500);
  },
// ...

A）然后在觀察者內部調用實例上的防抖函數：

// ...watch: {
    value(...args) {
      this.debouncedCallback(...args);
    },
  },
// ...

B）或在 template 中設定一個事件處理器：

<template><inputv-on:input="debouncedHandler"type="text" /></template>

在這之后，每次調用 this.debouncedCallback(...args) ，就算執行頻率非常高，內部的回調也能緩沖執行。

關于“Vue防抖和節流怎么使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。