當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue3+ts 实现防抖功能

發布時間：2023/12/16 vue 28 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue3+ts 实现防抖功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

使用自定義 ref 實現帶防抖功能的 v-model

import { customRef } from 'vue' export function useDebouncedRef<T>(value: T, delay = 200) {let timeout: any = nullreturn customRef((track, trigger) => {return {get() {track()return value},set(newValue: T) {clearTimeout(timeout)timeout = setTimeout(() => {value = newValuetrigger()}, delay)}}}) }//使用 export default {setup() {return {text: useDebouncedRef('hello')}} } <input v-model="text" />

總結

以上是生活随笔為你收集整理的vue3+ts 实现防抖功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。