不会还有人不会自定义ref吧？---防抖

介绍

customRef是vue提供的，用于创建一个自定义的 ref，显式声明对其依赖追踪和更新触发的控制方式。-----采集自官网。

• 类型

function customRef<T>(factory: CustomRefFactory<T>): Ref<T>

type CustomRefFactory<T> = (
  track: () => void,
  trigger: () => void
) => {
  get: () => T
  set: (value: T) => void
}

• 详细信息

customRef() 预期接收一个工厂函数作为参数，这个工厂函数接受 track 和 trigger 两个函数作为参数，并返回一个带有 get 和 set 方法的对象。

一般来说，track() 应该在 get() 方法中调用，而 trigger() 应该在 set() 中调用。然而事实上，你对何时调用、是否应该调用他们有完全的控制权。

• 那咱话不多说，上代码吧就：

不懂防抖的小伙伴要回去复习喽！

<template>
  <div class="count">
    <input type="text" v-model="keyword" />
    <h3>{{ keyword }}</h3>
  </div>
</template>

<script>
import { customRef } from "vue";
export default {
  name: "PersonItem",
  setup() {
    // let keyword=ref('hello')
    function myRef(value, delay) {
      console.log(value);
      //通过customRef去实现自定义
      return customRef((track, trigger) => {
        let timer = null;
        // 要求必须返回一个对象，里面包含get和set
        return {
          get() {
            // 通知vue追踪value的变化
            track();
            return value;
          },
          set(newValue) {
            clearTimeout(timer);
            timer = setTimeout(() => {
              value = newValue;
              trigger(); //告诉vue去更新界面。
            }, delay);
          },
        };
      });
    }
    let keyword = myRef("hello", 500);

    return { keyword };
  },
};