Beispiele zur Erläuterung der Verwendung der customRef-Funktion in Vue

Wie verwende ich die CustomRef-Funktion in Vue? Der folgende Artikel zeigt Ihnen, wie Sie die customRef-Funktion in VueJs verwenden. Ich hoffe, er wird Ihnen helfen!

ref ist die componsition API, die offiziell von Vue bereitgestellt wird. Es handelt sich um eine Funktion, die nicht reagierende Daten in reaktionsfähige Daten umwandelt. Benutzer müssen nicht darauf achten, wie die unterste Ebene die Datenerfassung und Reaktionsfähigkeit implementiert. Dies entspricht einem Hardcover-Computer. Für einige komplexe und spezielle Anforderungen müssen wir jedoch unsere eigenen Räder bauen und die interne Implementierung implementieren Struktur manuell und nativ. 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

Während der Implementierung grundlegender Funktionen ist eine zusätzliche Erweiterung erforderlich. Dies entspricht einem zusammengebauten Computer.

Anstatt es direkt im Einkaufszentrum zu kaufen, können Sie aus einigen vorgefertigten Teilen einen Hardcover-Computer zusammenbauen, der sogar erweitert werden kann. Wenn Sie eine individuelle und komplexe Funktionsanforderung realisieren, ist dieser benutzerdefinierte refEs ist sehr nützlich. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Frontend-Entwicklung】

Beispielverzögerte Anzeige h2> Wenn Sie eine Echtzeiterfassung und Echtzeitanzeige von Daten in input realisieren möchten, müssen Sie den Befehl v-model verwenden🎜rrreee🎜Das geht nicht Verwenden Sie jetzt die offiziell bereitgestellte Funktion ref<. das hei sie m eine funktion wie>ref</.> erstellen, wie unten gezeigt🎜rrreee🎜Mit der oben genannten Methode können Sie sammeln und benutzerdefinierte Daten anzeigen möchten. Nach dem Auslösen müssen Sie nur einen Timer hinzufügen, und der Rest bleibt unverändert🎜rrreee🎜Lösen Sie das Problem des kontinuierlichen Echos und der falschen Auslösung und das Problem, dass der Timer immer eingeschaltet ist🎜rrreee🎜 Was an dieser customRef schwieriger zu verstehen ist, ist, dass sie in der benutzerdefinierten ref-Funktion zurückgegeben werden muss. Gleichzeitig erhält es eine Factory-Funktion als Parameter. Diese Factory-Funktion akzeptiert track und trigger als Parameter und gibt ein Objekt mit get und set zurück Methoden 🎜🎜Im Allgemeinen befindet sich track() in get() auf, verfolgen Sie die Datenänderungen und benachrichtigen Sie vue code> der endgültigen Daten ändert sich, während die Funktion <code>trigger() Dann sollten Sie 🎜🎜 am Ende der Funktion set() aufrufen, um vue um die Vorlage erneut zu analysieren und die Seitendaten zu aktualisieren 🎜🎜Der letzte Schritt besteht darin, zu erkennen, wie lange gewartet werden muss, was später angezeigt wird. Verwenden Sie einen Timer, um dies zu implementieren, um das Problem häufiger falscher Auslöser zu lösen Die Lösung besteht darin, zuerst den Timer zu löschen und dann den Timer einzuschalten. 🎜<h2 data-id="heading-2">Zusammenfassung</h2>🎜Anpassung Die Funktion <code>ref(customRef()) ist Eine sehr nützliche Sache. Es entspricht einer Erweiterung einer Funktion von ref. Die interne Implementierung ist kompliziert und erfordert Erfahrung und Übung selbst. (Lernvideo-Sharing: 🎜 vuejs-Einführungs-Tutorial🎜, 🎜Grundlegendes Programmiervideo🎜)🎜

Das obige ist der detaillierte Inhalt vonBeispiele zur Erläuterung der Verwendung der customRef-Funktion in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!