介绍
Event throttling 和 debouncing 是指提高性能和潜在降低网络负担的两种方法。
虽然 Vue.js 1 以前为退出事件提供本地支持,但 [它在 Vue.js 2 中被删除(https://vuejs.org/v2/guide/migration.html#debounce-Param-Attribute-for-v-model-removed)。
因此,在 Vue.js 2 中引导和退出事件的常见方法是通过第三方库,例如 lodash。
在本教程中,您将将lodash.throttle和lodash.debounce应用于 Vue.js 2 应用程序。
前提条件
如果您想跟随这篇文章,您将需要:
- Node.js 本地安装,您可以按照 如何安装 Node.js 和创建本地开发环境进行操作。 *一些熟悉 debouncing and throttling的知识。 *一些熟悉 Vue的知识是有益的,但不需要。
本教程已通过 Node v15.8.0、npm v7.5.4、vue v2.6.11 和lodash v4.17.20 进行验证。
创建项目
要快速设置项目,本文将建议使用 @vue/cli。
<$>[注]
**注:**本文将采用使用npx的方法,以避免全球安装@vue/cli;
<$>
1npx @vue/cli create vue-lodash-example
选择预设(Default([Vue 2] babel, eslint))和包管理器(npm)后,导航到新创建的项目目录;
1cd vue-lodash-example
现在,您将希望使用以下命令将lodash添加到项目中:
1npm install lodash
<$>[注]
注: 如果您不需要导入所有lodash,则自定义webpack可以将库的大小缩小为所使用的函数。
接下来,使用代码编辑器在组件目录中创建一个新的UnmodifiedComponent.vue文件:
1[label src/components/UnmodifiedComponent.vue]
2<template>
3 <div>
4 <h1>Unmodified Events</h1>
5 <button @click="unmodifiedMethod()">Click this button as fast as you can!</button>
6 </div>
7</template>
8
9<script>
10export default {
11 methods: {
12 unmodifiedMethod: () => {
13 console.log('Button clicked!')
14 }
15 }
16}
17</script>
接下来,修改App.vue,以使用新的UnmodifiedComponent:
1[label src/App.vue]
2<template>
3 <div id="app">
4 <UnmodifiedComponent/>
5 </div>
6</template>
7
8<script>
9import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
10
11export default {
12 name: 'App',
13 components: {
14 UnmodifiedComponent
15 }
16}
17</script>
现在您可以运行 Vue.js 应用程序:
1npm run serve
在您的 Web 浏览器中导航到localhost:8080,并与您的 Web 浏览器中的按钮进行交互。控制台将记录您的所有交互。这些事件将在每次点击时立即发生。您将修改此方法以使用throttle和debounce。
威胁方法
接下来,你会将 throttle应用于你的Vue应用程序。
使用您的代码编辑器来复制您的UnmodifiedComponent并创建一个新的ThrottleComponent:
1[label ThrottleComponent.vue]
2<template>
3 <div>
4 <h1>Throttled Events</h1>
5 <button @click="throttleMethod()">Click this button as fast as you can!</button>
6 </div>
7</template>
8
9<script>
10import _ from 'lodash'
11
12export default {
13 methods: {
14 throttleMethod: _.throttle(() => {
15 console.log('Throttle button clicked!')
16 }, 2000)
17 }
18}
19</script>
接下来,修改App.vue以使用新的ThrottleComponent:
1[label src/App.vue]
2<template>
3 <div id="app">
4 <UnmodifiedComponent/>
5 <ThrottleComponent/>
6 </div>
7</template>
8
9<script>
10import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
11import ThrottleComponent from './components/ThrottleComponent.vue'
12
13export default {
14 name: 'App',
15 components: {
16 UnmodifiedComponent,
17 ThrottleComponent
18 }
19}
20</script>
现在您可以运行 Vue.js 应用程序:
1npm run serve
在您的 Web 浏览器中导航到localhost:8080,并与您的 Web 浏览器中的按钮进行交互。控制台将记录您的所有交互。
打破方法
接下来,你会将 debounce应用于你的Vue应用程序。
使用您的代码编辑器来复制您的UnmodifiedComponent,并创建一个新的DebounceComponent:
1[label DebounceComponent.vue]
2<template>
3 <div>
4 <h1>Debounced Events</h1>
5 <button @click="debounceMethod()">Click this button as fast as you can!</button>
6 </div>
7</template>
8
9<script>
10import _ from 'lodash'
11
12export default {
13 methods: {
14 debounceMethod: _.debounce(() => {
15 console.log('Debounce button clicked!')
16 }, 2000)
17 }
18}
19</script>
接下来,修改App.vue,以使用新的DebounceComponent:
1[label src/App.vue]
2<template>
3 <div id="app">
4 <UnmodifiedComponent/>
5 <ThrottleComponent/>
6 <DebounceComponent/>
7 </div>
8</template>
9
10<script>
11import UnmodifiedComponent from './components/UnmodifiedComponent.vue'
12import ThrottleComponent from './components/ThrottleComponent.vue'
13import DebounceComponent from './components/DebounceComponent.vue'
14
15export default {
16 name: 'App',
17 components: {
18 UnmodifiedComponent,
19 ThrottleComponent,
20 DebounceComponent
21 }
22}
23</script>
现在您可以运行 Vue.js 应用程序:
1npm run serve
在您的 Web 浏览器中导航到localhost:8080,并与您的 Web 浏览器中的按钮进行交互。 控制台将记录您的所有交互。 多个连续事件只会在最后一次点击后每 2000 毫秒( 2 秒)发生一次。
结论
在本教程中,您将lodash.throttle和lodash.debounce应用于 Vue.js 2 应用程序。
如果您想了解更多关于lodash,请阅读 官方文件。
如果您想了解有关 Vue.js 的更多信息,请参阅 我们的 Vue.js 主题页面以获取练习和编程项目。