一、创建一个自定义的ref，并对其依赖项跟踪和更新触发进行逻辑控制。（封装成一个hooks -- useMessageRef.ts）

import { customRef } from 'vue';

/**
 * 自定义ref
 * @param initValue 初始值
 * @param delay 延时时间（毫秒）
 * @returns 
 */
export default function (initValue: string, delay: number) {

    let message = customRef((track, trigger) => {
        let timer: number
        return {
            // 获取message时调用
            get() {
                // 告诉Vue数据message需要持续关注，一旦变化就更新
                track()
                console.log('调用了get方法 === ',);
                return initValue
            },
            // message被修改时调用
            set(value) {
                console.log('set === ', value);

                // 防抖效果：使用setTimeout和clearTimeout来控制定时器的设置和清除。
                clearTimeout(timer)
                // 下面定时器少了个T，直接写好像不让发文。。。
                timer = setimeout(() => {
                    initValue = value
                    // 通知Vue数据message变化了
                    trigger()
                }, delay);

            }
        }
    })

    return { message }

}

二、使用自定义ref

<template>
  <div class="app">
    <h2>{{ message }}</h2>
    <input type="text" v-model="message" />
  </div>
</template>


<script setup lang="ts" name="App">
  import useMessageRef from './hooks/useMessageRef';

  const { message } = useMessageRef('你干嘛~', 2000)
</script>


<style lang="scss" scoped>
  .app {
    width: 700px;
    height: 200px;
    margin: auto;
    margin-top: 100px;
    padding-top: 50px;
    text-align: center;
    background-color: bisque;
  }
  button {
    margin-right: 10px;
    background-color: darkorange;
  }
</style>

三、效果图。（本文中自定义ref的作用是延迟展示输入框中的内容）

Vue3 自定义ref（customRef）_自定义ref