在前端开发中，为了提高用户体验和保证系统的稳定性，经常需要对交互操作进行优化。两种常见的优化方式是防抖和节流。本文将使用 Vue3 和 TypeScript 来实现登入按钮的防抖和节流。
什么是防抖和节流
防抖（Debounce）是指在短时间内多次触发同一个事件时，只执行一次操作。比如说，在用户连续点击登入按钮时，只有用户停止点击一段时间后，才会真正执行登入操作。
节流（Throttle）是指在一定时间间隔内只执行一次操作。比如说，在用户持续按住登入按钮时，每隔一定时间才会执行一次登入操作。
使用防抖和节流处理登入按钮
步骤1：创建 Vue3 项目
首先，通过 Vue CLI 创建一个 Vue3 项目。
vue create login-button-demo
按照提示选择相应的选项，创建项目时选择 TypeScript 和 Vue Router。
步骤2：设计登入按钮
在 src 目录下新建一个 components 文件夹，并在该文件夹下创建一个 LoginButton.vue 文件。在 LoginButton.vue 文件中编写如下代码：
<template>
<button @click="handleLogin">登入</button>
</template>
<script setup type="module">
import { defineProps, defineEmits } from 'vue'
const emit = defineEmits(['login'])
const handleLogin = () => {
emit('login')
}
</script>
在本例中，我们创建了一个登入按钮，并在按钮的 click 事件中触发了 handleLogin 方法。
步骤3：添加防抖和节流逻辑
在 LoginButton.vue 文件中添加防抖和节流逻辑。
防抖
首先，我们需要添加防抖逻辑。具体实现为使用 lodash 的 debounce 方法对 handleLogin 方法进行防抖处理。
npm install lodash @types/lodash
<template>
<button @click="debouncedLogin">登入</button>
</template>
<script setup type="module">
import { defineProps, defineEmits, ref } from 'vue'
import { debounce } from 'lodash'
const emit = defineEmits(['login'])
const debouncedLogin = debounce(() => {
emit('login')
}, 1000)
</script>
在上述代码中，我们通过 debounce 方法创建了一个新的函数 debouncedLogin，该函数在调用后会在延迟 1000ms 后执行 emit('login')。
节流
接下来，我们添加节流逻辑。具体实现为使用 lodash 的 throttle 方法对 handleLogin 方法进行节流处理。
npm install lodash @types/lodash
<template>
<button @click="throttledLogin">登入</button>
</template>
<script setup type="module">
import { defineProps, defineEmits, ref } from 'vue'
import { throttle } from 'lodash'
const emit = defineEmits(['login'])
const throttledLogin = throttle(() => {
emit('login')
}, 1000)
</script>
在上述代码中，我们通过 throttle 方法创建了一个新的函数 throttledLogin，该函数在调用后会每隔 1000ms 执行一次 emit('login')。
步骤4：使用登入按钮组件
修改 src/App.vue 文件，将新创建的登入按钮组件引入，并监听其 login 事件。
<template>
<div class="container">
<login-button @login="handleLogin"></login-button>
</div>
</template>
<script lang="ts">
import { Options, Vue } from 'vue-class-component'
import LoginButton from './components/LoginButton.vue'
@Options({
components: {
LoginButton
}
})
export default class App extends Vue {
handleLogin() {
console.log('登录操作')
}
}
</script>
在上述代码中，我们使用了 login-button 组件，并通过 @login 监听了登入操作的事件。
步骤5：运行项目
最后，运行项目并测试登入按钮的防抖和节流效果。
npm run serve
在浏览器中打开相应的地址，点击登入按钮进行测试。
总结
本文介绍了如何使用 Vue3 和 TypeScript 实现登入按钮的防抖和节流。防抖和节流是前端开发中常用的交互优化方式，能够提高用户体验和系统的稳定性。希望本文对你理解和使用防抖和节流有所帮助。
本文来自极简博客，作者：开源世界旅行者，转载请注明原文链接：Vue3 TypeScript 实现登入按钮防抖和节流
