vue3利用customRef实现防抖

<template>
  <div class="container">
    <input v-model="text" />
    <p class="result">{{ text }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const text = ref('');
</script>

<template>
  <div class="container">
    <!-- @input 绑定一个 handleUpdate 函数 -->
    <input :value="text" @input="handleUpdate" />
    <p class="result">{{ text }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
const text = ref('');
const handleUpdate = (e) => {
  text.value = e.target.value
}
</script>

<script setup>
  import { ref } from 'vue';
  const text = ref('');
  // 我们在这里定义一个 timer
  let timer;
  const handleUpdate = (e) => {
    // 每一次执行这个函数的时候我们将 timer 情况
    clearTimeout(timer)
    // 然后再执行 setTimeout，比如说间隔 1000ms
    setTimeout(() => {
      text.value = e.target.value
    }, 1000)
  }
</script>

/**
 * @description: 防抖函数
 * @param {Function} func: 要延迟执行的函数
 * @param {Number} delay: 延迟时间 ( 默认 1000ms )
 */
export function debounce(func, delay = 1000) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      func.call(this, ...args);
    }, delay);
  };
}

<script setup>
  import { ref } from 'vue';
  import { debounce } from './debounce';
  const text = ref('');
  const update = (e) => (text.value = e.target.value)
  // 将 update 和 延迟时间传入进去
  // 当数据变化的时候，运行的是防抖函数
  // 那么防抖函数会隔一段时间再去运行这个 update 函数，去更新数据
  const handleUpdate = debounce(update, 1000)
</script>

// ref 方法需要一个值，我们写作 value
function ref(value) {
  // 它返回一个对象
  {
    // 对象中有一个 value 属性
    // 是通过 Object.defineProperty 定义的
    // 定义里会有一个 get 和 set 方法
    get(){
      // get 方法返回 value
      return value
    },
    set(val){
      // set 方法给 value重新赋值
      value = val
    }
  }
}

// 大概就是这个样子
// 但是不要忘记了 vue 是带有响应式的
// 而响应式的原理是什么呢？ 
// 就是在 get 的时候进行依赖收集，就是说谁用到了我这个数据
// 而 set 的时候叫做派发更新，表示通知使用数据的地方数据更新了
// 那么就应该是如下的样子

function ref(value) {
  {
    get(){
      // 依赖收集，我们称为 track()
      return value
    },
    set(val){
      // 派发更新 trigger()
      value = val
    }
  }
}

import { customRef } from "vue";
/**
 * @description: 防抖的 ref
 * @param {*} value: ref 的 value
 * @param {*} delay: 延迟时间，表示 value 的更新要在多少时间后触发 ( 默认为 1000ms )
 */
export function debounceRef(value, delay = 1000) {
  let timer;
  // 我们这里利用 customRef 来自定义 ref
  return customRef(() => {
    // customRef 中返回一个对象，对象中包含 get 和 set 函数
    return {
      get() {
        // 依赖收集 track()
        return value;
      },
      set(val) {
        // 使用 setTimeout 实现防抖
        clearTimeout(timer);
        timer = setTimeout(() => {
          // 派发更新 trigger()
          value = val;
        }, delay);
      },
    };
  });
}

import { customRef } from "vue";

export function debounceRef(value, delay = 1000) {
  let timer;
  return customRef((track, trigger) => {
    // 获得 track, trigger 函数
    return {
      get() {
        // 依赖收集 track()
        track();
        return value;
      },
      set(val) {
        clearTimeout(timer);
        timer = setTimeout(() => {
          value = val;
          // 派发更新 trigger()
          trigger();
        }, delay);
      },
    };
  });
}

<template>
  <div class="container">
    <input v-model="text" />
    <p class="result">{{ text }}</p>
  </div>
</template>

<script setup>
// 在使用时，我们要引入自定义的 ref
import { debounceRef } from './debounceRef';
const text = debounceRef('');
</script>