suchen
HeimWeb-FrontendView.jsBeispiele 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!

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

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. refVue官方提供的componsition API,将一个非响应式数据转变为响应式数据的函数,至于底层怎么实现数据的收集与响应式

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

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

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

示例-延迟显示

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

<template>
    <input type="text" v-model="keyword" />
    <h3 id="keyword">{{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 id="keyword">{{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 id="keyword">{{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函数中返回出去,同时,接收一个工厂函数作为参数,这个工厂函数接受tracktrigger两个函数

作为参数,并返回一个带有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!

Stellungnahme
Dieser Artikel ist reproduziert unter:掘金社区. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen
React vs. Vue: Welches Framework verwendet Netflix?React vs. Vue: Welches Framework verwendet Netflix?Apr 14, 2025 am 12:19 AM

NetflixuSesacustomframeworkcalted "Gibbon" Builtonreact, NotreactorVuedirect.1) TeamExperience: Wählen Sie beobädtes Vertrauen

Die Wahl der Frameworks: Was treibt die Entscheidungen von Netflix vor?Die Wahl der Frameworks: Was treibt die Entscheidungen von Netflix vor?Apr 13, 2025 am 12:05 AM

Netflix berücksichtigt hauptsächlich Leistung, Skalierbarkeit, Entwicklungseffizienz, Ökosystem, technische Schulden und Wartungskosten bei der Rahmenauswahl. 1. Leistung und Skalierbarkeit: Java und Springboot werden ausgewählt, um massive Daten und hohe gleichzeitige Anforderungen effizient zu verarbeiten. 2. Entwicklungseffizienz und Ökosystem: Verwenden Sie React, um die Effizienz der Front-End-Entwicklung zu verbessern und sein reiches Ökosystem zu nutzen. 3. Technische Schulden- und Wartungskosten: Wählen Sie Node.js, um Microservices zu erstellen, um Wartungskosten und technische Schulden zu senken.

Reagieren, Vue und die Zukunft von Netflix 'FrontendReagieren, Vue und die Zukunft von Netflix 'FrontendApr 12, 2025 am 12:12 AM

Netflix verwendet React hauptsächlich als Front-End-Framework, das durch VUE für bestimmte Funktionen ergänzt wird. 1) Die Komponentierung von React und das virtuelle DOM verbessern die Leistung und Entwicklungseffizienz von Netflix -Anwendungen. 2) VUE wird in den internen Tools und kleinen Projekten von Netflix verwendet, und seine Flexibilität und Benutzerfreundlichkeit sind entscheidend.

Vue.js im Frontend: Anwendungen und Beispiele in realer WeltVue.js im Frontend: Anwendungen und Beispiele in realer WeltApr 11, 2025 am 12:12 AM

Vue.js ist ein progressives JavaScript -Framework, das zum Erstellen komplexer Benutzeroberflächen geeignet ist. 1) Zu seinen Kernkonzepten gehören Reaktionsdaten, Komponentierungen und virtuelle DOM. 2) In praktischen Anwendungen kann es durch den Aufbau von Todo -Anwendungen und die Integration von Vuerouter demonstriert werden. 3) Beim Debuggen wird empfohlen, VODEVTOOLS und CONSOLE.LOG zu verwenden. 4) Die Leistungsoptimierung kann durch V-IF/V-Show, Listen-Rendering-Optimierung, asynchrone Belastung von Komponenten usw. erreicht werden.

Vue.js und React: Verständnis der wichtigsten UnterschiedeVue.js und React: Verständnis der wichtigsten UnterschiedeApr 10, 2025 am 09:26 AM

Vue.js ist für kleine bis mittelgroße Projekte geeignet, während React eher für große und komplexe Anwendungen geeignet ist. 1. Vue.js 'Responsive System aktualisiert das DOM automatisch durch Abhängigkeitsverfolgung und erleichtert es, Datenänderungen zu verwalten. 2.React übernimmt einen Einweg-Datenfluss, und die Datenflüsse von der übergeordneten Komponente zur untergeordneten Komponente und liefern einen klaren Datenfluss und eine leicht zu debug-Struktur.

Vue.js vs. React: projektspezifische ÜberlegungenVue.js vs. React: projektspezifische ÜberlegungenApr 09, 2025 am 12:01 AM

Vue.js eignet sich für kleine und mittelgroße Projekte und schnelle Iterationen, während React für große und komplexe Anwendungen geeignet ist. 1) Vue.js ist einfach zu bedienen und für Situationen geeignet, in denen das Team nicht ausreicht oder die Projektskala klein ist. 2) React hat ein reichhaltigeres Ökosystem und eignet sich für Projekte mit hoher Leistung und komplexen funktionalen Bedürfnissen.

Wie man einen Tag zum Vue springtWie man einen Tag zum Vue springtApr 08, 2025 am 09:24 AM

Zu den Methoden zum Implementieren des Sprung eines Tags in VUE gehören: Verwenden des A -Tags in der HTML -Vorlage, um das HREF -Attribut anzugeben. Verwenden Sie die Router-Link-Komponente des Vue-Routings. Verwenden Sie dies. $ Router.push () Methode in JavaScript. Parameter können durch den Abfrageparameter weitergeleitet werden, und Routen sind in den Routeroptionen für dynamische Sprünge konfiguriert.

So implementieren Sie den Komponentensprung für VUESo implementieren Sie den Komponentensprung für VUEApr 08, 2025 am 09:21 AM

Es gibt die folgenden Methoden, um den Komponentensprung in Vue zu implementieren: Verwenden Sie Router-Link und & lt; Router-View & gt; Komponenten zur Durchführung von Hyperlinksprung und geben das zu Attribut als Zielpfad an. Verwenden Sie die & lt; Router-View & gt; Komponente direkt zur Anzeige der aktuell verdrehten gerenderten Komponenten. Verwenden Sie die Methoden Router.push () und Router.Replace () für die programmatische Navigation. Ersteres rettet die Geschichte und letzteres ersetzt die aktuelle Route, ohne Aufzeichnungen zu verlassen.

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
4 Wochen vorBy尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
1 Monate vorBy尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

SAP NetWeaver Server-Adapter für Eclipse

SAP NetWeaver Server-Adapter für Eclipse

Integrieren Sie Eclipse mit dem SAP NetWeaver-Anwendungsserver.

EditPlus chinesische Crack-Version

EditPlus chinesische Crack-Version

Geringe Größe, Syntaxhervorhebung, unterstützt keine Code-Eingabeaufforderungsfunktion

DVWA

DVWA

Damn Vulnerable Web App (DVWA) ist eine PHP/MySQL-Webanwendung, die sehr anfällig ist. Seine Hauptziele bestehen darin, Sicherheitsexperten dabei zu helfen, ihre Fähigkeiten und Tools in einem rechtlichen Umfeld zu testen, Webentwicklern dabei zu helfen, den Prozess der Sicherung von Webanwendungen besser zu verstehen, und Lehrern/Schülern dabei zu helfen, in einer Unterrichtsumgebung Webanwendungen zu lehren/lernen Sicherheit. Das Ziel von DVWA besteht darin, einige der häufigsten Web-Schwachstellen über eine einfache und unkomplizierte Benutzeroberfläche mit unterschiedlichen Schwierigkeitsgraden zu üben. Bitte beachten Sie, dass diese Software