在監(jiān)聽(tīng)頻繁觸發(fā)的事件時(shí)，一定要多加小心，比如 用戶在輸入框打字、窗口大小調(diào)整、滾動(dòng)、Intersection Observer 事件。

這些事件總是被頻繁觸發(fā)，可能 幾秒一次。如果針對(duì)每次事件都發(fā)起 fetch 請(qǐng)求（或類(lèi)似的行為），那顯然是不明智的。

我們需要做的就是減緩事件處理程序的執(zhí)行速度。這種緩沖技術(shù)就是 防抖（debounce） 和 節(jié)流（throttle）[1] 。

在本文中，你會(huì)了解到如何在 Vue 組件中 使用 防抖 和 節(jié)流 控制 觀察者（watchers） 和 事件處理程序。

1. 觀察者 防抖

我們先從一個(gè)簡(jiǎn)單的組件開(kāi)始，我們的任務(wù)是 將用戶輸入到 文本框中的文本 輸出到控制臺(tái):

<template>
  <input v-model="value" type="text" />
  <p>{{ value }}</p>
</template>
<script>
export default {
  data() {
    return {
      value: "",
    };
  },
  watch: {
    value(newValue, oldValue) {
      console.log("Value changed: ", newValue);
    }
  }
};
</script>

打開(kāi)demo[2]

打開(kāi) demo，在 輸入框 敲幾個(gè)字符。每次輸入時(shí)，值就會(huì)被 log 到控制臺(tái)。

我們通過(guò)使用 觀察者（watcher） 監(jiān)聽(tīng) value 數(shù)據(jù)屬性 來(lái)實(shí)現(xiàn)了打印日志。但如果你想在 觀察者的回調(diào) 中加入一個(gè) 使用 value 作為參數(shù) 的 GET 請(qǐng)求，那你應(yīng)該不會(huì)期望太過(guò)頻繁地發(fā)起請(qǐng)求。

我們來(lái)對(duì) 打印控制臺(tái)日志 這個(gè)行為做一下 防抖。核心思想是創(chuàng)建一個(gè) 防抖函數(shù)，然后在 觀察者 內(nèi)部調(diào)用該函數(shù)。

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

我們來(lái)將 防抖邏輯 應(yīng)用到組件：

<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>

試試 demo[3]

如果你打開(kāi)這個(gè) demo，你會(huì)發(fā)現(xiàn)其實(shí)從用戶角度來(lái)看，變化不大：你依舊可以像上一個(gè) demo 中一樣自由輸入字符。

但有一個(gè)區(qū)別：只有在最后一次輸入的 500ms 之后，才會(huì)將新的輸入值打印日志到控制臺(tái)。這說(shuō)明 防抖 在生效。

觀察者 的 防抖實(shí)現(xiàn) 只需要 3 個(gè)簡(jiǎn)單步驟：

1. 在 create() 鉤子 里，創(chuàng)建 防抖回調(diào)，并將其賦值到實(shí)例上：this.debouncedWatch = debounce(..., 500)。
2. 在 觀察者 回調(diào) watch.value() { ... } 中 傳入正確的參數(shù) 調(diào)用 this.debouncedWatch()。
3. 最后，beforeUnmount() 鉤子中 調(diào)用 this.debouncedWatch.cancel() ，在卸載組件之前，取消所有還在 pending 的 防抖函數(shù)執(zhí)行。

采用同樣的方式，你可以對(duì)任意數(shù)據(jù)屬性的 觀察者 應(yīng)用 防抖。然后就可以安全執(zhí)行 防抖回調(diào)內(nèi)部的一些比較重的操作，比如 網(wǎng)絡(luò)請(qǐng)求、繁重的 DOM 操作，等等。

2. 事件處理器 防抖

上面一節(jié)，我展示了如何對(duì) 觀察者 使用 防抖，那么常規(guī)的事件處理器呢？

我們重用之前用戶輸入數(shù)據(jù)到輸入框的例子，但這一次會(huì)給輸入框加個(gè) 事件處理器。

像往常一樣，如果你沒(méi)有采取任何緩沖的措施，每當(dāng)值被修改時(shí)，會(huì)被打印到控制臺(tái)：

<template>
  <input v-on:input="handler" type="text" />
</template>
<script>
export default {
  methods: {
    handler(event) {
      console.log('New value:', event.target.value);
    }
  }
};
</script>

試試 demo[4]

打開(kāi)這個(gè) demo，在輸入框打幾個(gè)字符。看看控制臺(tái)：你會(huì)發(fā)現(xiàn)每次你輸入的時(shí)候就會(huì)有日志被打印出來(lái)。

同樣，如果你會(huì)執(zhí)行一些比較重的操作（比如網(wǎng)絡(luò)請(qǐng)求），可就不合適了。

對(duì) 事件處理器 使用 防抖，可以參考下面這個(gè)：

<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>

試試 demo[5]

打開(kāi) demo，輸入一些字符。組件只有在最后一次輸入的 500ms 之后，才會(huì)將新的輸入值打印日志到控制臺(tái)。防抖 再一次生效了！

事件處理器 的 防抖實(shí)現(xiàn) 只需要 3 個(gè)步驟：

1. . 在 create() 鉤子 里，創(chuàng)建實(shí)例后，立刻將 防抖回調(diào) debounce(event => {...}, 500) 賦值到 this.debouncedHandler 。
2. 在輸入框的 template 中 給 v-on:input 賦上 debouncedHandler ：<input v-on:input="debouncedHandler" type="text" />
3. 最后，在卸載組件之前， 在 beforeUnmount() 鉤子中 調(diào)用 this.debouncedHandler.cancel() ，取消所有還在 pending 的 函數(shù)調(diào)用。

另一方面，這些例子應(yīng)用了 防抖 的技術(shù)。然而，同樣的方式可以以用于創(chuàng)建 節(jié)流函數(shù)。

3. 注意

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

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

這比在實(shí)例對(duì)象上創(chuàng)建 防抖函數(shù) 要簡(jiǎn)單的多。

例如：

<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>

試試 demo[6]

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

你如果試過(guò) demo，你會(huì)發(fā)現(xiàn)是有效果的！

問(wèn)題是，組件使用 export default { ... } 導(dǎo)出的 options 對(duì)象，包括方法，會(huì)被組件實(shí)例重用。

如果網(wǎng)頁(yè)中有 2 個(gè)以上的組件實(shí)例，那么所有的組件都會(huì)應(yīng)用 相同 的防抖函數(shù) methods.debouncedHandler — 這會(huì)導(dǎo)致防抖出現(xiàn)故障。

4. 總結(jié)

在 Vue 中，可以很輕松的對(duì) 觀察者 和 事件處理器 應(yīng)用 防抖 和 節(jié)流。

核心邏輯就是，在 created() 鉤子 里，創(chuàng)建 防抖 或 節(jié)流 的回調(diào)，并賦值在實(shí)例上。

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

A）然后在觀察者內(nèi)部調(diào)用實(shí)例上的防抖函數(shù)：

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

B）或在 template 中設(shè)定一個(gè)事件處理器：

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

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