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

Question

问题描述

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

Answer 1

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

Answer 2

在Nuxt.js中使用VueUse的useDebounceFn函数时，需要将其与Vue的生命周期钩子函数相结合使用。你可以在mounted或者created生命周期钩子函数中调用useDebounceFn。

以下是一个示例：

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

<script>
import { ref, watch, onMounted } from 'vue'
import { useDebounceFn } from '@vueuse/core'

export default {
  setup() {
    const aa = ref('')

    onMounted(() => {
      watch(aa, (newValue) => {
        const debouncedFn = useDebounceFn(() => {
          console.log(newValue)
        }, 500)
        debouncedFn()
      })
    })

    return {
      aa
    }
  }
}
</script>

在上面的示例中，我们使用onMounted钩子函数来监听aa的变化，然后在watch回调函数中创建一个防抖函数debouncedFn，并立即执行它。这样就能实现防抖效果。

你可以根据自己的需求在适当的生命周期钩子函数中调用useDebounceFn。记得要在Vue的setup函数中返回响应式对象，以便在模板中使用。

Answer 3

防抖处理应该在包裹watch 处理函数上吧