vue3 之手写一个防抖 ref 函数

zheng_jia_jun

于 2022-08-18 07:29:24 发布

阅读量377

点赞数

CC 4.0 BY-SA版权

分类专栏： vue3学习文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/zheng_jia_jun/article/details/126397802

vue3学习专栏收录该内容

9 篇文章

订阅专栏

本文介绍了如何在Vue3中封装一个防抖ref函数，用于表单输入时延迟更新值，避免频繁触发更新。通过创建计算属性实现防抖效果，确保在设定的延迟时间内多次输入只触发一次更新。示例代码展示了防抖ref的实现和使用方法，适用于需要优化性能的表单场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue3 之手写一个防抖 ref 函数

有时候，我们表单的值需要随时根据用户输入的值更新，但是又不想每输入一个字，就更新一次，想要输入完表单的值再更新，这个时候我们就可以封装一个防抖的 ref 函数。

具体代码

<script setup>
import { watch,ref,computed,unref } from "vue"

/**
 *  防抖 ref 函数
 *  @params {value, delay}
 * 	@return {value}
*/
function useDebouncedRef(value, delay = 200) {
  // 定义传入进来的响应式变量
  let temp = ref(value)
  // 定时器 time
  let time;
  // 定义计算属性 InputValue
  let inputValue = computed({
    get(){
      // 返回 temp 原始值
      return unref(temp)
    },
    set(val){
      // 如果已经有定时器了，清空定时器
      if(time){
        clearTimeout(time)
      }
      // 隔一会后才会更新数据
      time = setTimeout(()=>{
        temp.value = val
      },delay)
    }
  })
  // 返回计算属性
  return inputValue;
}
const text = useDebouncedRef("hello")

/**
 * 在 delay 的时间内一直输入，只会监听到一次 value 的改变
*/
watch(text, (value) => {
  console.log(value)
})
</script>

<template>
  <input v-model="text" />
</template>