vue3语法糖自定义ref属性

下面自定义ref可以实现延迟渲染数据，点击button可以实现防抖哦！

<template>
    <h3>{{keyWord}}</h3>
    <input type="text" v-model="keyWord">
    <button @click="num++">{{num}}</button>
</template>

<script setup>
    import { ref, customRef } from 'vue'
    let num = myRef(0)
    let keyWord = myRef('hello')

    function myRef(value){
        return customRef((track,trigger)=>{
            return {
                get(){
                    track() // 通知vue追踪value的变化
                    return value
                },
                set(newVal){
                    setTimeout(() => {
                        value = newVal
                        trigger() // 通知vue去重新解析模板
                    }, 1000);
                }
            }
        })
    }

呈现效果