当前位置：首页 > news >正文

利用自定义 ref 实现函数防抖

news 2024/10/22 21:43:22

今天来简单介绍一个新的方法，使用自定义 ref 实现函数防抖。

1. 自定义 ref 的来源

自定义 ref 防抖函数来自于前端开发中的两个概念：Vue 的响应式系统和数防抖（Debounce）。

1、Vue 响应式系统：Vue 提供了 ref 和 watch 来实现响应式数据更新，开发者可以通过 ref 定义响应式数据，并通过 watch 监控变化。

2、防抖（Debounce）：防抖是一个在高频事件中避免性能消耗的常见技术。它的核心思想是将多次频繁触发的操作合并为一次，确保在设定时间内，事件只触发一次。

将两者结合，可以利用 Vue 的 ref 和防抖逻辑，在前端表单输入、搜索框等场景中高效地管理用户输入、限制高频操作，提升应用性能。

2. 原始写法（无自定义 ref）

在没有自定义 ref 的情况下，通常直接在事件处理函数中实现防抖。

在 Vue 中，这种方法通常通过 watch 或者在模板中绑定事件。不使用 v-model 处理，因为它是实时改变的。

🌰

<template><input class="input" @input="handleInputChange($event.target.value)" /><div class="content">{{ inputValue }}</div>
</template><script setup>
import { ref } from 'vue'
const inputValue = ref('')
// 原始防抖函数实现
const debounce = (fn, delay) => {let timeout = nullreturn function (...args) {if (timeout) {clearTimeout(timeout)}timeout = setTimeout(() => {fn.apply(this, args)}, delay)}
}
// 使用防抖处理输入
const handleInputChange = debounce((value) => {// 执行实际的输入处理逻辑inputValue.value = valueconsole.log('输入内容:', value)
}, 300)
</script>

300ms 后，展示到 div 和控制台中。

3. 自定义 ref 实现防抖（优化写法）

虽然原始写法可以满足基本的防抖需求，但在 Vue 中，我们希望利用其响应式特性，使数据的防抖处理与 Vue 的响应式系统深度结合。因此，使用自定义 ref 和 watch 可以更优雅地实现防抖逻辑。

🌰：

<template><div><input class="input" v-model="inputValue" /><p>实时输入的值: {{ inputValue }}</p><p>防抖后的值: {{ debouncedValue }}</p></div>
</template><script setup>
import { ref, watch } from 'vue'
// 自定义防抖 ref 的 Hook
function useDebouncedRef(initialValue, delay = 300) {const inputValue = ref(initialValue)const debouncedValue = ref(initialValue)let timeout = nullwatch(inputValue, (newValue) => {if (timeout) {clearTimeout(timeout)}timeout = setTimeout(() => {debouncedValue.value = newValue}, delay)})return {inputValue,debouncedValue}
}
// 使用自定义防抖 ref 实现
const { inputValue, debouncedValue } = useDebouncedRef('', 300)
</script>

展示为：

4. 利用 Vue 提供的 customRef 实现

不但可以自定义实现，还可以使用 Vue 提供专门产生一个自定义 ref 的API：customRef。

customRef 官方文档：https://cn.vuejs.org/api/reactivity-advanced

🌰：

<template><div><input class="input" v-model="debouncedInput" placeholder="输入防抖" /><div class="content">{{ debouncedInput }}</div></div>
</template><script setup>
import { customRef } from 'vue'
// 创建防抖函数，返回一个 ref 数据
const useDebouncedRef = (initialValue, delay = 300) => {let timer = nullreturn customRef((track, trigger) => ({get() {// 依赖收集track()return initialValue},set(val) {clearTimeout(timer)timer = setTimeout(() => {// 派发更新trigger()initialValue = val}, delay)}}))
}
const debouncedInput = useDebouncedRef('', 500) // 设置防抖延迟为500ms
</script>

当用户在输入框中输入内容时，debouncedInput 的值会被更新，但由于防抖的机制，输入内容的变化不会立即反映到视图中，而是会有一个延迟。