Vue3中customRef的用法

customRef作用：

        创建一个自定义的 ref，并对其依赖项跟踪和更新触发进行显式控制。

        如果要使用，记得是在自定义的 ref 中返回一个 customRef，而 customRef 也要返回一个对象

customRef参数:

        customRef的两个参数分别是用于追踪的 track 与用于触发响应的 trigger

代码演示：

        我们通过一个小的功能来体现customRef的用法 在页面输入框中输入文字 1秒后下面h1标签显示最新的数据 类似于防抖的功能 

 

        我们在代码中定义了一个myRef方法并设置了返回值，接着我们声明了一个keyWorld变量通过调用 myRef方法并传递了一个参数 来接收方法的返回值 并将接收到的值返回出去 在模板中使用

<template>
  <div>
    <input type="text" v-model="keyWorld">
    <h1>值是：{{keyWorld}}</h1>
  </div>
</template>

<script>
import { customRef } from "vue";
export default {
  name: "App",
  setup() {
    // 自定义一个ref
    function myRef(value) {
      return customRef((track, trigger) => {
        let timeId
        return {
          get() {
            console.log(value);
            track()    // 通知vue追踪数据的变化
            return value
          },
          set(newValue) {
            console.log(newValue);
            value = newValue
            clearTimeout(timeId)
            timeId = setTimeout(() => {
              trigger()   // 通知Vue去重新解析模板
            }, 1000);
          }
        }
      })
    }
    let keyWorld = myRef("hello")

    // 将数据返回出去
    return {
      keyWorld,
    };
  },
};
</script>

         我们可以看到在方法中返回了customRef的调用  在customRef参数中传递了一个回调函数 在回调函数中我们返回了一个对象 对象中配置了两个方法get和set 这也是customRef方法所规定的 

        customRef的两个参数分别是用于追踪的 track 与用于触发响应的 trigger

        只要是读取了数据就走get方法 修改数据就走set 方法

        我们在get方法里返回了myRef接收到的值 并调用track() 追踪数据的变化  
        我们在set方法里会收到一个最新的值newValue 我们将修改后的最新的值赋值给之前的value 设置定时器 调用trigger() 一秒后通知Vue去重新解析模板

        为了防止每次修改都处触发一个新的定时器 我们在set函数外声明了一个变量来接收定时器返回的id 在下一次修改之后 我们先清除上一次还没有执行的定时器 在调用trigger() 通知Vue去重新解析模板