23 - 自定义ref

[cone41]

<script setup>
import { watch, ref, customRef } from 'vue';

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

  return customVal;
}
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>