小技巧1,在vue3中利用自定义ref实现防抖(customRef)
文章目录
- 提出问题
- 常规实现方案
- customRef
- 技巧型实现方案
- 小结
提出问题
在vue中如何去使用防抖呢?
或者说,在vue中如何去使用防抖最舒服呢?
看以下这个输入框,其实所谓的防抖呢,实际上就是输入完后,我希望当我停下来一段时间后,数据才真正的响应
常规实现方案
那么我们用常规方法来实现下这个防抖
<script lang="ts" setup>
import { ref } from 'vue'
import { debounce } from 'lodash-es'
const text = ref('')const inputHandle = (e: any) => {text.value = e.target.value
}const debounceHandler = debounce(inputHandle, 2000)
</script><template><input @input="debounceHandler" /><p> {{ text }} </p>
</template>
代码其实很简单,但是其实有点繁琐了,当然功能是没任何问题的
我要先导入ref,再导入debounce一个工具函数
然后写一个目标函数,再一段时间后去响应这个值
就这样写了一堆,要是个别地方使用其实还好,但是很多地方都要使用,就感觉有点臃肿了
customRef
在 Vue 3 中,customRef 是一个用于创建自定义响应式引用的 API。它允许开发者更细粒度地控制响应式引用的行为,特别是在需要进行特殊的响应式处理时。
-
什么是 customRef?
customRef 接受一个工厂函数,返回一个包含 get 和 set 方法的响应式引用。这使得开发者可以定义如何获取和设置值,同时还能决定如何通知依赖的变化。 -
适用场景
需要自定义响应式行为,例如延迟更新、节流、去抖等。
在性能优化中,通过控制响应式值的更新频率来减少不必要的计算。
技巧型实现方案
废话不多说,技巧型方案就是借用customRef来实现的,那么最终代码有多简洁呢???
// 写一个format.ts文件
import { customRef } from 'vue'export const debounceRef = (value: any, delay: number) => {let timeoutId: any = nullreturn customRef((track, trigger) => ({get() {track() // 追踪依赖return value},set(newValue) {// 使用 setTimeout 来延迟更新clearTimeout(timeoutId)timeoutId = setTimeout(() => {value = newValuetrigger() // 派发更新}, delay) // 1秒延迟}}))
}
<script lang="ts" setup>
import { debounceRef } from './format'
const text = debounceRef('', 2000)
</script><template><input v-model="text" /><p> {{ text }} </p>
</template>
最后实现结果,功能上和常规方案上一摸一样的,但是代码上十分简洁,虽然封装了一个debounceRef,但是对于如果很多地方上使用的话,这样写无疑会更好点
小结
其实这个方法呢就是借用vue3的customRef Api
实现,那么对于vue2有吗?
vue2是没有的,对于vue2如果需要实现,需要使用 Vue 的数据观察和自定义事件机制,或者通过计算属性和方法的组合来实现
最后这里只是多介绍一种方案实现,至于这个技巧方案好不好用,因人而异吧,有些人喜欢,有些人不喜欢,但不管怎样,多一种实现方案总归是好的。。。