Exemples pour expliquer comment utiliser la fonction customRef dans Vue

Comment utiliser la fonction customRef dans Vue ? L'article suivant vous montrera comment utiliser la fonction customRef dans VueJs. J'espère qu'il vous sera utile !

ref est l'API de composition officiellement fournie par Vue. C'est une fonction qui convertit les données non réactives en données réactives. Quant aux utilisateurs, ils n'ont pas besoin de prêter attention à la manière dont la couche inférieure met en œuvre la collecte de données et la réactivité. Cependant, parfois, pour certains besoins complexes et particuliers, nous devons construire nos propres roues et mettre en œuvre le système interne. structurer manuellement et nativement. 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

Lors de la mise en œuvre des fonctions de base, une extension supplémentaire est nécessaire. Ensuite, vous devez personnaliser ref à ce stade. La structure interne doit être assemblée par vous-même.

Au lieu de l'acheter directement au centre commercial, utilisez des pièces prêtes à l'emploi pour assembler un ordinateur de type couverture rigide, et il peut même être étendu lorsque vous réalisez une exigence fonctionnelle personnalisée et complexe, cette refpersonnalisée. >C'est très utile. [Recommandations associées : tutoriel vidéo vuejs, développement web front-end】

Exemple d'affichage différé h2> Si vous souhaitez obtenir une collecte et un affichage en temps réel des données dans input, vous devez utiliser la commande v-model🎜rrreee🎜Maintenant, vous Vous ne pouvez pas utiliser la fonction ref officiellement fournie, c'est-à-dire que vous devez créer une fonction similaire à <code>ref, comme indiqué ci-dessous🎜rrreee🎜En utilisant la méthode ci-dessus, vous pouvez collecter et afficher des données personnalisées. Si vous souhaitez attendre quelques secondes Après le déclenchement, il vous suffit d'ajouter une minuterie à set, et le reste reste inchangé🎜rrreee🎜Résolvez le problème de l'écho continu, du faux déclenchement, et le problème de la minuterie qui est toujours activée🎜rrreee🎜 Ce qui est plus difficile à comprendre à propos de ce customRef, c'est qu'il doit être renvoyé dans la fonction personnalisée ref At. en même temps, il reçoit une fonction d'usine en paramètre. Cette fonction d'usine accepte track et trigger sont deux fonctions 🎜🎜 en tant que paramètres et renvoie un objet avec les méthodes get et set. 🎜🎜De manière générale, track() est dans get(), suit les modifications des données et informe vue des données finales changent, tandis que la fonction trigger() Ensuite, vous devez appeler 🎜🎜 à la fin de la fonction set() pour avertir vue code> pour réanalyser le modèle et mettre à jour les données de la page 🎜🎜La dernière étape consiste à déterminer le temps d'attente, qui sera affiché plus tard. Utilisez une minuterie pour mettre en œuvre cela afin de résoudre le problème des faux déclencheurs fréquents. consiste d'abord à effacer la minuterie, puis à l'activer🎜<h2 data-id="heading-2">Résumé</h2>🎜Personnalisation La fonction <code>ref(customRef()) est une chose très utile. Cela équivaut à une extension d'une fonction de ref. Vous pouvez l'implémenter manuellement. La mise en œuvre interne est compliquée et nécessite de l'expérimenter et de la pratiquer vous-même🎜🎜 (Partage vidéo d'apprentissage : 🎜vuejs. tutoriel d'introduction🎜, 🎜Vidéo de programmation de base🎜)🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!