vue3之自定义ref

<template>
  <input type="text" v-model="keyWord" />
  <h3>{{ keyWord }}</h3>
</template>

<script>
import { customRef, ref } from "vue";
export default {
  setup() {
    // let keyWord = ref("1111");
    // 创建一个自定义的 ref
    function myRef(value, delay) {
    //创建一个防抖 ref，即只在最近一次 set 调用后的一段固定间隔后再调用：
      let timer;
      // 创建一个自定义的 ref，显式声明对其依赖追踪(track)和更新触发(trigger)的控制方式。
      return customRef((track, trigger) => {
        return {
          get() {
            // console.log(`value值被改变了`);
            track(); //依赖追踪(track)
            return value;
          },
          set(newValue) {
            clearInterval(timer); //如果有定时器，先清除定时器
            timer = setTimeout(() => {
              value = newValue;
              trigger(); //更新触发(trigger)
              console.log(`value值被改成了${newValue}`);
            }, delay);
          },
        };
      });
    }
    let keyWord = myRef("1111", 500);
    return {
      keyWord,
    };
  },
};
</script>

<style>
</style>