介绍

事件限制和去抖动是指提高性能和潜在降低网络开销的两种方法。

虽然 Vue.js 1 曾经对去抖动事件有本机支持，但它在 Vue.js 2 中被删除了。

因此，在 Vue.js 2 中限制和消除事件的常用方法是通过第三方库，如lodash。

在本教程中，您将应用lodash.throttle和lodash.debounce到 Vue.js 2 应用程序。

先决条件

如果你想跟随这篇文章，你需要：

• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。
• 熟悉去抖动和节流。
• 熟悉Vue会有所帮助，但不是必需的。
• 熟悉Lodash会有所帮助，但不是必需的。

本教程已通过 Node v15.8.0、npmv7.5.4、vuev2.6.11 和lodashv4.17.20 验证。

设置项目

为了快速设置项目，本文将推荐使用@vue/cli.

注意：本文将采取使用的方式npx来避免全局安装@vue/cli；

npx @vue/cli create vue-lodash-example

选择预设（Default ([Vue 2] babel, eslint)）和包管理器（npm）后，导航到新创建的项目目录；

cd vue-lodash-example

现在，您需要lodash使用以下命令添加到项目中：

npm install lodash

注意：如果不需要全部导入lodash，自定义webpack可以将库的大小减少到使用的函数。也可以分别导入和 之类的lodash包中的部分。lodash.throttlelodash.debounce

接下来，使用您的代码编辑器UnmodifiedComponent.vue在components目录中创建一个新文件：

<template>
  <div>
    <h1>Unmodified Events</h1>
    <button @click="unmodifiedMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
export default {
  methods: {
    unmodifiedMethod: () => {
      console.log('Button clicked!')
    }
  }
}
</script>

接下来，修改App.vue以使用新的UnmodifiedComponent：

<template>
  <div id="app">
    <UnmodifiedComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent
  }
}
</script>

现在您可以运行 Vue.js 应用程序：

npm run serve

localhost:8080在 Web 浏览器中导航到并与 Web 浏览器中的按钮进行交互。控制台将记录您的所有交互。每次点击都会立即触发这些事件。您将修改此方法以使用throttle和debounce。

节流方法

接下来，您将应用throttle到您的 Vue 应用程序。节流可用于确保您的事件被保留但随着时间的推移而分开。

使用您的代码编辑器复制您的UnmodifiedComponent并创建一个新的ThrottleComponent：

<template>
  <div>
    <h1>Throttled Events</h1>
    <button @click="throttleMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    throttleMethod: _.throttle(() => {
      console.log('Throttle button clicked!')
    }, 2000)
  }
}
</script>

接下来，修改App.vue以使用新的ThrottleComponent：

<template>
  <div id="app">
    <UnmodifiedComponent/>
    <ThrottleComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
import ThrottleComponent from './components/ThrottleComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent,
    ThrottleComponent
  }
}
</script>

现在您可以运行 Vue.js 应用程序：

npm run serve

localhost:8080在 Web 浏览器中导航到并与 Web 浏览器中的按钮进行交互。控制台将记录您的所有交互。多个连续事件将持续触发，延迟为 2000 毫秒（2 秒）。

去抖动方法

接下来，您将应用debounce到您的 Vue 应用程序。去抖动本质上将您的事件组合在一起，并防止它们被过于频繁地触发。

使用您的代码编辑器复制您的UnmodifiedComponent并创建一个新的DebounceComponent：

<template>
  <div>
    <h1>Debounced Events</h1>
    <button @click="debounceMethod()">Click this button as fast as you can!</button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  methods: {
    debounceMethod: _.debounce(() => {
      console.log('Debounce button clicked!')
    }, 2000)
  }
}
</script>

接下来，修改App.vue以使用新的DebounceComponent：

<template>
  <div id="app">
    <UnmodifiedComponent/>
    <ThrottleComponent/>
    <DebounceComponent/>
  </div>
</template>

<script>
import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
import ThrottleComponent from './components/ThrottleComponent.vue'
import DebounceComponent from './components/DebounceComponent.vue'

export default {
  name: 'App',
  components: {
    UnmodifiedComponent,
    ThrottleComponent,
    DebounceComponent
  }
}
</script>

现在您可以运行 Vue.js 应用程序：

npm run serve

localhost:8080在 Web 浏览器中导航到并与 Web 浏览器中的按钮进行交互。控制台将记录您的所有交互。多个连续事件只会在最后一次点击后每 2000 毫秒（2 秒）触发一次。

结论

在本教程中，您将lodash.throttle和应用lodash.debounce到 Vue.js 2 应用程序。

如果您想了解更多信息lodash，请阅读官方文档。

如果您想了解有关 Vue.js 的更多信息，请查看我们的 Vue.js 主题页面以获取练习和编程项目。