vue3 customRef使用示例

customRef：用于自定义一个ref，可以显式的控制依赖追踪和触发响应。

接受一个工厂函数，两个参数分别是用于追踪的track与用于触发响应的trigger，并返回一个带有get和set属性的对象。

<template>
  <input v-model="keyword">
    <div>{{keyword}}</div>
</template>
<script lang="ts">
  import { customRef,ref,toRef } from 'vue'
    export default {
        name: 'demo',
        setup() {
            // 自定义一个ref，名称为myRef
            let keyword = usemyRef('Hello',100);
        
        return {
            keyword
        };
        },
        
       
    }

    function usemyRef<T>(value:T,delay=200) {
                let timer:number;
                // 使用vue的customRef去配置我们的myRef,参数为一个函数，这个函数有两个参数可以直接使用
                // track:
                // trigger:
                return customRef((track,trigger)=> {
                    // 要求必须返回一个对象，里面包含get和set
                    return {
                        get() {
                            // 通知vue追踪value的变化
                            track()
                            return value
                        },
                        set(newValue:T) {
                            clearTimeout(timer)
                            timer = setTimeout(()=> {
                                value = newValue;
                                // 通知vue去重新解析模板
                                trigger();
                            },delay)
                        }
                    }
                })
               }
</script>