vue3 customRef使用示例

9200237

已于 2022-12-13 11:01:28 修改

阅读量122

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-12-13 10:58:59 首次发布

本文链接：https://blog.csdn.net/yangyong1250/article/details/128298632

版权

前端专栏收录该内容

17 篇文章

订阅专栏

本文介绍如何使用Vue的customRef API来创建一个自定义的响应式引用，通过延迟更新实现防抖效果，优化输入框的实时搜索场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>