Vue에서 customRef 함수를 사용하는 방법을 설명하는 예

Vue에서 customRef 기능을 어떻게 사용하나요? 다음 글에서는 VueJs에서 customRef 함수를 사용하는 방법을 보여드리겠습니다. 도움이 되기를 바랍니다.

ref는 Vue에서 공식적으로 제공하는 composition API입니다. 사용자는 맨 아래 계층이 데이터 수집 및 응답성을 구현하는 방법에 주의를 기울일 필요가 없습니다. 그러나 때로는 복잡하고 특별한 요구 사항이 있는 경우 자체 휠을 구축하고 내부 기능을 구현해야 합니다. 수동 및 기본 구조. ref是Vue官方提供的componsition API,将一个非响应式数据转变为响应式数据的函数,至于底层怎么实现数据的收集与响应式

使用者无需去关注，相当于就是精装电脑，然而有时候，针对一些复杂特殊的需求，我们需要自己造轮子，自己手动原生的去实现内部结构。

实现基础的功能的同时，还要进行额外的拓展，那么这时候就需要自定义ref了的，它就相当于是组装式的电脑，内部结构需要自己去组装、实现。

而非直接从商城里购买，用一些现成的零部件组装一个类似精装的电脑，甚至还可以进行拓展，在实现一个定制化复杂的功能需求时，这个自定义ref就很有用。【相关推荐：vuejs视频教程、web前端开发】

示例-延迟显示

想要在input中实现一个数据的实时收集与实时展示,需要使用v-model指令

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
 import { ref } from "vue";
 let keyword = ref("itclanCoder"); // Vue官方提供的ref函数,返回一个响应式数据
</script>

现在不能用官方提供的ref函数,也就是自己要自顶一个类似ref函数,如下所示

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
import { customRef } from &#39;vue&#39;;      
// 自定义的一个ref,名为myRef,自定义ref就是一个函数
function myRef(value) {
  // 自定义,自己得写逻辑,customRef必须要传入一个函数,而且函数里面必须要返回一个对象
  return  customRef((track,trigger) => {  // 第一个return 是把自定义的内容返回出去,第二个return 是返回里面的逻辑,返回get,和set
    return {  
        get() {  // 读取数据,这个value是初始化传递过来的数据
            console.log(&#39;get&#39;,`${value}`);
            track(); // 追踪一下数据的改变,通知vue最终value数据的变化,提前和get沟通一下,让value是有作用的
            return value
        },
        set(newValue) { // 设置数据,新的值,修改数据
           value = newValue;
           trigger(); // customRef函数内接收两个参数,一个是track,另一个就是trigger,通知vue去重新解析模板
        }
    }
  });  
}    
let keyword = myRef("itclanCoder"); // 自己定义一个ref
</script>

通过上面的方式就可实现自定义数据的收集和展示,如果想要等待几秒后,触发,那么只需要在set加一个定时器就够了的,其他不变

set(newValue) {
    setTimeout(() => {
        value = newValue;
        trigger(); // 通知vue去重新解析模板
    },500)
}

解决持续回显,误触发的问题,定时器一直开通的问题

<template>
    <input type="text" v-model="keyword" />
    <h3>{{keyword}}</h3>
</template>
<script setup>
import { customRef } from &#39;vue&#39;;      
// 自定义的一个ref,名为myRef,自定义ref就是一个函数
function myRef(value) {
  let timer;  // 开启一个定时器  
  // 自定义,自己得写逻辑,customRef必须要传入一个函数,而且函数里面必须要返回一个对象
  return  customRef((track,trigger) => {  // 第一个return 是把自定义的内容返回出去,第二个return 是返回里面的逻辑,返回get,和set
    return {  
        get() {  // 读取数据,这个value是初始化传递过来的数据
            console.log(&#39;get&#39;,`${value}`);
            track(); // 追踪一下数据的改变,通知vue最终value数据的变化,提前和get沟通一下,让value是有作用的
            return value
        },
        set(newValue) { // 设置数据,新的值,修改数据
           clearInterval(timer);  // 先清除定时器,在开
           timer = setTimeout(() => {
              value = newValue;
              trigger(); // customRef函数内接收两个参数,一个是track,另一个就是trigger,通知vue去重新解析模板
           },500)
        }
    }
  });  
}    
let keyword = myRef("itclanCoder"); // 自己定义一个ref
</script>

这个customRef比较难以理解的是,它需要在自定义ref函数中返回出去，同时,接收一个工厂函数作为参数,这个工厂函数接受track和trigger两个函数

作为参数,并返回一个带有get和set方法的对象

一般来说,track()在get()方法中的返回值前进行调用,追踪一下数据的改变,通知vue最终数据的变化,而trigger()函数则应该在set()函数的末尾调用

通知vue去重新解析模板,更新页面数据

最后就是实现等待多长时间,稍后显示,使用一个定时器去实现,解决频繁误触发的问题,常规的解决办法,先清除定时器,然后在开启定时器

总结

自定义ref(customRef())函数是一个非常有用的东西,相当于是对ref

기본 기능을 구현하는 동안 추가 확장이 필요합니다. 이때 ref를 사용자 정의해야 합니다. 이는 내부 구조를 직접 조립하는 것과 같습니다.

쇼핑몰에서 직접 구매하는 대신, 미리 만들어진 부품을 사용하여 하드커버 같은 컴퓨터를 조립할 수 있으며, 맞춤화되고 복잡한 기능 요구사항을 실현할 경우 이 맞춤형 ref를 사용하여 확장할 수도 있습니다. >매우 유용합니다. [관련 권장사항: vuejs 비디오 튜토리얼, 웹 프런트엔드 개발]

예제 지연 표시 h2> 입력에서 데이터의 실시간 수집 및 실시간 표시를 구현하려면 v-model 명령을 사용해야 합니다🎜rrreee🎜수 없습니다. 이제 공식적으로 제공되는 refref와 유사한 함수를 추가해야 합니다🎜rrreee🎜위 방법을 사용하면 몇 초 동안 기다리려면 타이머를 설정에 추가하면 되고 나머지는 변경되지 않습니다. 🎜rrreee🎜연속 에코, 잘못된 트리거 문제를 해결하세요. , 타이머가 항상 켜져 있는 문제🎜rrreee🎜 이 customRef에 대해 더 이해하기 어려운 점은 사용자 정의 ref 함수에서 반환되어야 한다는 것입니다. 동시에, 이 팩토리 함수는 track 및 trigger 두 가지 함수 🎜🎜를 매개변수로 받아들이고 get 및 set을 사용하여 객체를 반환합니다. 🎜🎜일반적으로 track()은 get() 메서드에서 반환 값 앞에 호출되어 데이터 변경 사항을 추적하고 vue에 알립니다. code>의 최종 데이터가 변경되고 trigger() 함수가 변경되는 동안 set() 함수 끝에서 🎜🎜를 호출하여 vue를 사용하여 템플릿을 다시 구문 분석하고 페이지 데이터를 업데이트합니다. 🎜🎜마지막 단계는 대기 시간을 인식하는 것이며, 이는 나중에 표시될 것입니다. 타이머를 사용하여 자주 발생하는 잘못된 트리거 문제를 해결하세요. 해결책은 타이머를 먼저 지운 다음 타이머를 켜는 것입니다🎜<h2 data-id="heading-2">요약</h2>🎜사용자 정의 <code>ref(customRef()) 함수는 다음과 같습니다. 매우 유용한 기능입니다. 수동으로 구현할 수 있습니다. 내부 구현이 복잡하고 직접 경험하고 연습해야 합니다🎜🎜 (동영상 공유 학습: 🎜 vuejs 입문 튜토리얼🎜, 🎜기본 프로그래밍 영상🎜)🎜

위 내용은 Vue에서 customRef 함수를 사용하는 방법을 설명하는 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!