23 - 自定义ref

[a993897020]

// 你的答案
<script setup>
import { watch,customRef } from "vue"

/**
 * Implement the function
*/
function useDebouncedRef(value, delay = 200) {
  let timer;
  const text=customRef((track,trigger)=>{
   return{ 
     get:()=>{
      track()
      return value
    },
    set:(newVal)=>{
      if(timer){
        clearTimeout(timer)
      }
      timer=setTimeout(()=>{
        trigger()
        value=newVal
      },delay)
    }
   }
  })
  return text
}
const text = useDebouncedRef("hello")

/**
 * Make sure the callback only gets triggered once when entered multiple times in a certain timeout
*/
watch(text, (value) => {
  console.log(value)
})
</script>

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