nuxt3使用vueuse的useDebounceFn(防抖) 无效？

作者站长头像
站长
· 阅读数 17

问题描述

nuxt3使用vueuse的useDebounceFn(防抖) 无效

问题出现的环境背景及自己尝试过哪些方法

       <input v-model="aa" type="text" />
watch(() => aa.value, (newValue) => {
  console.log(newValue)  
    useDebounceFn(() => {
        console.log(newValue)
    }, 500)
})

如上面那样，无法监听到

实际项目中

const state = useState('resUmeValue',()=>useResumeList())

    if(process.client && localStorage){
        watch(()=>state.value,(newValue)=>{
            useDebounceFn(()=>{
                console.log(newValue)
                localStorage.setItem('resUme',JSON.stringify(newValue))
            },500)
        },{deep:true})
    }
    return state
回复
1个回答
avatar
test
2024-06-28

useDebounceFn接收一个函数，并返回一个新函数，在新函数内部对目标函数进行防抖，所以你在watch中每次运行只是返回了一个新的函数，并不是执行里面的函数，你应该在watch外面运行useDebounceFn，在watch内部运行useDebounceFn的返回值

let handleFn = useDebounceFn(()=>{
    console.log(newValue)
    localStorage.setItem('resUme',JSON.stringify(newValue))
},500)
watch(()=>state.value,(newValue)=>{
  handleFn(newValue)          
},{deep:true})

// 或者直接
watch(()=>state.value,handleFn,{deep:true})
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容