Recherche différée — exercice corrigé de Vue : construire une application web (école d'ingénieur) (chapitre 3)

Recherche différée

La réactivité · niveau 3 (difficile)

Énoncé

Un champ de recherche met à jour une ref saisie à chaque frappe. La recherche (une ref recherche, affichée dans la page) ne doit être lancée que 300 ms après la dernière frappe. Écrire l'observateur avec setTimeout, en utilisant le troisième paramètre du rappel de watch, une fonction qui enregistre un nettoyage, appelé avant le prochain rappel.

Corrigé


const { createApp, ref, watch } = Vue;

createApp({
  setup() {
    const saisie = ref("");
    const recherche = ref("");

    watch(saisie, (texte, ancien, auNettoyage) => {
      const minuteur = setTimeout(() => {
        recherche.value = texte;
        console.log("recherche lancée :", texte);
      }, 300);
      auNettoyage(() => clearTimeout(minuteur)); // annulé si la saisie change avant 300 ms
    });

    return { saisie, recherche };
  },
}).mount("#app");

On tape « jav », on attend 400 ms, puis on tape « a », on l'efface 100 ms plus tard et l'on tape « ascript » ; 400 ms après la dernière frappe, la console, puis le paragraphe :


recherche lancée : jav
recherche lancée : javascript
Résultats pour « javascript »

Chaque frappe relance le rappel, qui commence par appeler le nettoyage enregistré la fois précédente : le minuteur en attente est annulé. Seule la dernière frappe d'une rafale lance la recherche. Vue 3.5 propose aussi la fonction onWatcherCleanup, qui fait la même chose.