Vue3中如何只要customRef自定义ref响应式数据

customRef：可以自定义ref，在数据发生变化时做一些其它操作，灵活处理逻辑

1. 基本使用：使数据发生变化后过一秒在更新页面

// hooks\useMsgRef.ts
import {customRef} from "vue";
export default (initValue: string, delay: number) => {
    let timer: any
    return customRef((track, trigger) => {
        return {
            get: () => {
                track()  //通知vue监听数据变化
                return initValue
            },
            set: (value: string) => {
                clearTimeout(timer)
                timer = setTimeout(() => {
                    initValue = value
                    trigger()  // 数据变化后通知vue更新页面
                }, delay)
            }
        }
    })
}

 customRef接收一个函数，该函数接收两个方法track与trigger，且需要返回包含有get、set方法的对象。get用于给使用者返回数据，set用于接收新的数据。

track：通知vue监听数据变化

trigger：数据变化后通知vue更新页面

2. 在组件中使用

<template>
  <p>{{ msg }}</p>
  <p><input type="text" v-model="msg"></p>
</template>

<script setup lang="ts">
import useMsgRef from "@/hooks/useMsgRef"
let msg = useMsgRef("奥特曼",2000)
</script>