vue3_CustomRef的使用

官方文档

src\App.vue

<template>
    <h2>CustomRef的使用</h2>
    <input type="text" v-model="keyword"><br />
    {{keyword}}
</template>

<script lang="ts">
import { customRef, defineComponent, ref } from 'vue'

// 自定义hook防抖函数
function useDebouncedRef<T>(value: T, delay = 200) {
    let timeOutId: number
    // 自定义ref对象
    return customRef((track, trigger) => {
        return {
            // 返回数据
            get() {
                // 追踪数据
                track()
                return value
            },
            // 设置数据
            set(newValue: T) {
                clearTimeout(timeOutId)
                timeOutId = setTimeout(() => {
                    value = newValue
                    trigger()
                }, delay)
            },
        }
    })
}
export default defineComponent({
    name: 'App',
    setup() {
        // const keyword = ref('abc')
        const keyword = useDebouncedRef('abc', 500)
        return {
            keyword,
        }
    },
})
</script>