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.tsimport { 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( )