Vue3 customRef函数

自定义ref

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

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

            let msg = myRef('hello', 500)

           return {
            msg
           }
        }
       
    }
</script>