vue3-api之customRef()

// 这个官方文档介绍也是主要用于防抖节流

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

<script>
// import { ref } from "vue";
import { customRef } from "vue"; // 作用:创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制.比如说可以用来实现防抖函数。

export default {
  name: "App",
  setup() {
    let timer = null
    // 自定义一个ref名为： ref_afanfan
    function ref_afanfan(value, time) {
      // let timer = null
      // console.log("---myRef---", value); // ---myRef--- hello
      return customRef((track, trigger) => {
        return {
          get() {
            // 告诉vue追踪数据
            track();
            return value;
          },
          set(newValue) {
            // 防抖
            clearTimeout(this.timer)
            this.timer =  setTimeout(() => {
              // 更换数据
              value = newValue;
              // 告诉vue去触发页面更新
              trigger();
            }, time);
          },
        };
      });
    }

    // let keyWord = ref('hello'); // 使用vue提供的ref
    let keyWord = ref_afanfan("hello",500);
    console.log('keyWord===',keyWord.value)

    return {
      timer,
      keyWord,
    };
  },
};
</script>