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

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

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

1. 观察者 防抖

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

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

打开demo：

https://codesandbox.io/s/vue-input-szgn1?file=/src/App.vue

打开 demo，在 输入框 敲几个字符。每次输入时，值就会被 log 到控制台。

我们通过使用 观察者（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>

试试 demo

https://codesandbox.io/s/vue-input-debounced-4vwex?file=/src/App.vue

如果你打开这个 demo，你会发现其实从用户角度来看，变化不大：你依旧可以像上一个 demo 中一样自由输入字符。

但有一个区别：只有在最后一次输入的 500ms 之后，才会将新的输入值打印日志到控制台。这说明 防抖 在生效。

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

在 create() 钩子 里，创建 防抖回调，并将其赋值到实例上：this.debouncedWatch = debounce(..., 500)。

在 观察者 回调 watch.value() { ... } 中 传入正确的参数 调用 this.debouncedWatch()。

最后，beforeUnmount() 钩子中 调用 this.debouncedWatch.cancel() ，在卸载组件之前，取消所有还在 pending 的 防抖函数执行。

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

2. 事件处理器 防抖

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

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

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

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

试试 demo：

https://codesandbox.io/s/vue-event-handler-plls4?file=/src/App.vue

打开这个 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>

试试 demo：

https://codesandbox.io/s/vue-event-handler-debounced-973vn?file=/src/App.vue

打开 demo，输入一些字符。组件只有在最后一次输入的 500ms 之后，才会将新的输入值打印日志到控制台。防抖 再一次生效了！

事件处理器 的 防抖实现 只需要 3 个步骤：

.在 create() 钩子 里，创建实例后，立刻将 防抖回调 debounce(event => {...}, 500) 赋值到 this.debouncedHandler 。

在输入框的 template 中 给 v-on:input 赋上 debouncedHandler ：

最后，在卸载组件之前， 在 beforeUnmount() 钩子中 调用 this.debouncedHandler.cancel() ，取消所有还在 pending 的 函数调用。

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

3. 注意

你可能不理解：为什么不直接在 组件的 method 选项中创建 防抖函数，然后在 template 中调用这些方法作为事件处理器？

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

这比在实例对象上创建 防抖函数 要简单的多。

例如：

<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

https://codesandbox.io/s/vue-event-handler-debounced-incorrectly-320ci?file=/src/App.vue

这次不是在 created() 钩子 里创建 防抖回调了，而是将 防抖回调 赋给了 methods.debouncedHandler 。

你如果试过 demo，你会发现是有效果的！

问题是，组件使用 export default { ... } 导出的 options 对象，包括方法，会被组件实例重用。

如果网页中有 2 个以上的组件实例，那么所有的组件都会应用 相同 的防抖函数 methods.debouncedHandler — 这会导致防抖出现故障。

4. 总结

在 Vue 中，可以很轻松的对 观察者 和 事件处理器 应用 防抖 和 节流。

核心逻辑就是，在 created() 钩子 里，创建 防抖 或 节流 的回调，并赋值在实例上。

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

A）然后在观察者内部调用实例上的防抖函数：

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

B）或在 template 中设定一个事件处理器：

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

在这之后，每次调用 this.debouncedCallback(...args) ，就算执行频率非常高，内部的回调也能缓冲执行。

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• element表格二次封装的方法步骤是什么

  本文主要介绍了基于element-ui表格的二次封装实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 用JS怎么制作上传图片的功能，原理及方法是什么

  这篇文章主要为大家详细介绍了js实现上传图片功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

• JavaScript对象属性有什么，怎么理解

  对象有两种属性，普通的数据属性和访问器属性。访问器属性本质上是用于获取和设置值的函数(可以拦截、过滤、处理等操作要设置或获取的属性)，但从外部代码来看就像传统属性一样。

• 原生网络请求怎么理解，过程是怎样的

  这篇文章主要为大家介绍了网络请求方案原生网络请求和js网络请求库的过程示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步

• 详解jQuery如何实现绑定和解绑事件

  这篇文章给大家分享的是jQuery如何对事件绑定和解绑的相关内容。小编觉得挺实用的，因此分享给大家做个参考，文中的示例代码介绍得很详细，有需要的朋友可以参考，接下来就跟随小编一起了解看看吧。