vue3+ts 实现防抖功能

最新推荐文章于 2024-08-28 10:11:09 发布

真前端

最新推荐文章于 2024-08-28 10:11:09 发布

阅读量1.8k

点赞数

分类专栏： js vue typescript 文章标签：防抖函数 vue3防抖 vue3+ts防抖函数

本文链接：https://blog.csdn.net/weixin_42571699/article/details/120433292

版权

vue 同时被 3 个专栏收录

43 篇文章 1 订阅

订阅专栏

13 篇文章 1 订阅

订阅专栏

typescript

2 篇文章 0 订阅

订阅专栏

使用自定义 ref 实现带防抖功能的 v-model

import { customRef } from 'vue'
export function useDebouncedRef<T>(value: T, delay = 200) {
  let timeout: any = null
  return customRef((track, trigger) => {
    return {
      get() {
        track()
        return value
      },
      set(newValue: T) {
        clearTimeout(timeout)
        timeout = setTimeout(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
  })
}

//使用
export default {
  setup() {
    return {
      text: useDebouncedRef('hello')
    }
  }
}
<input v-model="text" />