customRef 作用：创建一个自定义的 ref , 并对其依赖项跟踪和更新触发进行逻辑控制。

在原生 ref 的基础上，添加自己的逻辑等...

在 Vue 3 中，customRef 是一个用于创建自定义响应式引用的 API。它允许开发者控制和优化响应式引用的行为，适用于特定的需求，例如创建延迟更新、合并多个变更，或是使用非标准的 getter/setter 行为。

customRef 接收一个函数，该函数返回一个对象，这个对象包含 get 和 set 函数。在 get 函数中，可以定义如何返回当前值，而在 set 函数中定义如何更新值。

基本结构：

import { customRef } from 'vue';

// 使用 customRef 创建自定义引用
const myRef = customRef((track, trigger) => {
  let value; // 自定义值

  return {
    get() {
      track(); // 追踪依赖
      return value; // 返回当前值
    },
    set(newValue) {
      value = newValue; // 设置新值
      trigger(); // 触发更新
    },
  };
});

• track()：用于追踪访问的地方。当调用 get() 时，此函数会注册当前的依赖关系。
• trigger()：用于在调用 set() 时通知依赖于这个引用的地方要重新渲染或执行相应的操作。

实例：封装成 Hooks

// Person.vue

<template>
    <div class="person">
        <h3>{
  
  { msg }}</h3>
        <input type="text" v-model="msg">
    </div>
    
</template>
    
<script setup lang='ts' >
// import { ref } from 'vue';
import useMsgRef from '../hooks/useMsgRef'

// 使用 Vue 提供的默认 ref 定义响应式数据，数据一变，页面就更新
// const msg = ref('你好')

// 使用 Vue 提供的 customRef 定义响应式数据
// 补充需求，输入一秒后，再显示
// 使用 useMsgRef 来定义一个响应式数据且有延迟效果
let {msg}=useMsgRef('xxx',2000)
</script>
<style scoped>

</style>

// useMsgRef.ts

import { customRef } from "vue";

export default function (initValue:String,delay:number) {
// 使用 Vue 提供的 customRef 定义响应式数据
// 初始值
let timer:number
// track(跟踪)，trigger(触发)
const msg = customRef((track,trigger) => {
    return {
        // get(): msg 被读取时被调用
        get() {
            // track() 告诉 Vue 数据 msg 很重要，你要对 msg 进行持续关注
            // 那么，一旦 msg 变化就去更新
            track() 
            // console.log('get');
            return initValue
        },
        // set(): msg 被修改时被调用
        set(value) {
            // 补充需求，输入一秒后，再显示
            clearTimeout(timer)
            timer = setTimeout(() => {
                console.log('set',value);
                initValue = value;
                // trigger() 通知 Vue 数据 msg 变化了
                trigger()
            },delay)
        }
    }
})
    return {msg}
}

重点理解：track( ) 和 trigger( )