vue3.0 customRef 自定义ref函数

• 创建一个自定义ref
• 输入框输入内容后0.5s后在h3标签中展示
• timer实现防抖效果

home.vue

<template>
    <input type="text" v-model="keyWord">
    <h3>{{ keyWord }}</h3>
</template>

<script>
import {customRef} from 'vue
export default {
    setup(){
        function myRef(value,delay) {
            let timer
            return customRef((track, trigger) => {
                return {
                    get(){
                        track(); // 通知vue追踪value的变化
                        return value
                    },
                    set(newValue){
                        clearTimeout(timer)
                        timer = setTimeout(() => {
                            value = newValue
                            trigger(); // 通知vue去重新解析模板
                        },delay)
                    }    
                }
            })
        }

        let keyWord = myRef('hellow',500);

        return { keyWord }
    }
}
</script>