#yyds干货盘点#vue的防抖

Posted 2022-10-28

在监听频繁触发的事件时，一定要多加小心，比如 用户在输入框打字、窗口大小调整、滚动、Intersection Observer 事件。

这些事件总是被频繁触发，可能 几秒一次。如果针对每次事件都发起 fetch 请求（或类似的行为），那显然是不明智的。

我们需要做的就是减缓事件处理程序的执行速度。这种缓冲技术就是防抖和节流。

观察者 防抖

我们先从一个简单的组件开始，我们的任务是 将用户输入到 文本框中的文本 输出到控制台:

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

我们通过使用 观察者（watcher） 监听 ​​value​​​ 数据属性 来实现了打印日志。但如果你想在 观察者的回调 中加入一个 使用 ​​value​​ 作为参数 的 GET 请求，那你应该不会期望太过频繁地发起请求。

我们来对 打印控制台日志 这个行为做一下 防抖。核心思想是创建一个 防抖函数，然后在 观察者 内部调用该函数。

我在这里选择了 ​​lodash.debounce​​ 的 防抖实现，但你可以自由选择喜欢的实现方式。

我们来将 防抖逻辑 应用到组件：

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

观察者 的 防抖实现 只需要 3 个简单步骤：

1. 在​​create()​​ 钩子 里，创建 防抖回调，并将其赋值到实例上：​​this.debouncedWatch = debounce(..., 500)​​。
2. 在 观察者 回调​​watch.value() ... ​​ 中 传入正确的参数 调用​​this.debouncedWatch()​​。
3. 最后，​​beforeUnmount()​​ 钩子中 调用​​this.debouncedWatch.cancel()​​ ，在卸载组件之前，取消所有还在 pending 的 防抖函数执行。

采用同样的方式，你可以对任意数据属性的 观察者 应用 防抖。然后就可以安全执行 防抖回调内部的一些比较重的操作，比如 网络请求、繁重的 DOM 操作，等等。

事件处理器 防抖

上面一节，我展示了如何对 观察者 使用 防抖，那么常规的事件处理器呢？

我们重用之前用户输入数据到输入框的例子，但这一次会给输入框加个 事件处理器。

像往常一样，如果你没有采取任何缓冲的措施，每当值被修改时，会被打印到控制台：

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

​​试试 demo​​

打开这个 demo，在输入框打几个字符。看看控制台：你会发现每次你输入的时候就会有日志被打印出来。

同样，如果你会执行一些比较重的操作（比如网络请求），可就不合适了。

对 事件处理器 使用 防抖，可以参考下面这个：

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

事件处理器 的 防抖实现 只需要 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 的 函数调用。

另一方面，这些例子应用了 防抖 的技术。然而，同样的方式可以以用于创建 节流函数。