23 - 自定义ref

[kalu5]

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

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

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