vue3-customRef

141 阅读1分钟

一、定义

customRef自定义数据,可以灵活处理数据逻辑

二、示例

延时获取input的数据

<template>
    <input v-model='keyWord' />
    {{keyWord}}
</template>
<script>
    import {ref} from 'vue'
    export default{
        setup(){
            function myRef(val,delay){
            let timer
                return costomRef((track,trigger)=>{
                    return{
                        get(){
                            track()
                            return val
                        },
                        set(newVal){
                            clearSetTimeout(timer)
                            timer=setTimeout(()=>{
                                val=newVal
                                trigger()
                            },delay)
                        }
                    })
                }
            }
        
            let keyWord=myRef('hello',1000)
            return{
                keyWord
            }
        }
    }
</script>

定义自定义方法,返回customRef方法。
通过customRef的get()获取数据,使用track()进行更新监视;
通过customRef的set()设置数据,使用trigger()重新解析