Vue3-customRef

customRef

• 作用：创建一个自定义的ref，并对其依赖项跟踪和更新触发进行显式控制。

demo：实现输入数据，防抖效果

<template>
    <input v-model="keyword">
    <div>{{keyword}}</div>
</template>
    
<script>
    import { customRef } from 'vue'
    export default {
        name: 'demo',
        setup() {
            // 自定义一个ref，名称为myRef
            function myRef(value,delay) {
                let timer
                // 使用vue的customRef去配置我们的myRef,参数为一个函数，这个函数有两个参数可以直接使用
                // track:
                // trigger:
                return customRef((track,trigger)=> {
                    // 要求必须返回一个对象，里面包含get和set
                    return {
                        get() {
                            // 通知vue追踪value的变化
                            track()
                            return value
                        },
                        set(neValue) {
                            clearTimeout(timer)
                            timer = setTimeout(()=> {
                                value = newValue
                                // 通知vue去重新解析模板
                                trigger()
                            },delay)
                        }
                    }
                })
            }
        }
        
        let keyword = myRef('Hello',100)
        
        return {
            keyword
        }
    }
</script>