nuxt3使用vueuse的useDebounceFn(防抖) 无效?
问题描述
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个回答

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})
回复

适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引,对解决问题有帮助
- 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容