Vue3 使用useMsgRef来定义一个响应式数据且有延时效果

自定义的useMsgRef.ts

import { customRef } from 'vue'
export default function (initValue: string, delay: number) {
    let timer: number
    //track(跟踪), trigger(触发)
    let msg = customRef((track, trigger) => {
        return {
            get() {
                track()
                return initValue
            },
            set(value) {
                clearTimeout(timer)
                //这里也可以从http获取数据 赋给initValue
                timer = setTimeout(() => {
                    initValue = value
                    trigger()
                }, delay)//延时delay(毫秒)执行
            }
        }
    })
    return msg
}

调用自定义的useMsgRef方法

<template>
  <p>{{ msg }}</p>
  <input type="text" v-model="msg">
</template>
<script setup lang="ts">
import useMsgRef from './useMsgRef'
//延时1秒执行 响应式数据
let msg = useMsgRef('LuoFenMing', 1000)
</script>
<style scoped></style>

本文来自 www.luofenming.com