Comment forcer le rendu d’un composant Vue

Faire en sorte que les composants Vue soient restitués via des valeurs de variables réactives. Découvrez comment dans cet article.

Parfois, nous avons besoin d’un nouveau rendu de nos composants Vue ; cependant, Vue peut ne pas toujours restituer nos composants comme prévu ou quand nous le souhaitons.

Dans cet article, nous verrons comment forcer le rendu d’un composant Vue à l’aide de variables réactives.

La réactivité de Vue

Les composants Vue seront restitués si nous mettons à jour les valeurs dans les variables réactives.

Par exemple, nous écrivons :

<script setup lang="ts">
import { ref } from "vue";

const count = ref(0);
</script>

<template>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
</template>

pour définir le count variable réactive et définissez sa valeur initiale sur 0 en appelant ref.

Ensuite, nous ajoutons un écouteur d’événement de clic au bouton pour incrémenter countla valeur. En conséquence, lorsque nous cliquons sur le bouton, count est incrémenté de 1.

Le ref La fonction est utilisée pour définir un état réactif dans l’API Vue Composition, qui déclenche le rendu du composant lorsque ce qu’il renvoie change de valeur.

Pour faire la même chose avec l’API Vue Options, on déclare une valeur réactive en la mettant dans l’objet renvoyé par le data méthode.

Par exemple, nous écrivons :

<script>
export default {
  data() {
    return {
      count: 0,
    };
  },
};
</script>

<template>
  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
  </div>
</template>

nous mettons count dans l’objet retourné par le data et définissons sa valeur initiale à 0. Et dans le bouton, on fait la même chose que précédemment pour incrémenter count par 1 quand on clique dessus.

Dans Vue 3, toutes les valeurs réactives sont enveloppées dans un objet proxy et Vue surveille les modifications dans les modifications du proxy pour détecter les modifications dans les valeurs réactives.

Les proxys JavaScript nous permettent d’intercepter et de redéfinir les opérations fondamentales pour l’objet à partir duquel nous créons un proxy.

Pour créer un proxy JavaScript, nous utilisons le Proxy constructeur. Par exemple, nous écrivons :

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler = {
  get(target, prop, receiver) {
    console.log("get", target, prop);
    return target[prop];
  },
  set(obj, prop, value) {
    console.log("set", obj, prop, value);
    return Reflect.set(obj, prop, value);
  },
};

const proxy = new Proxy(target, handler);
console.log(proxy.message1);
proxy.message2 = "world";
console.log(proxy.message2);

pour créer le target objet à partir duquel nous créons un proxy. Ensuite, nous utilisons le Proxy constructeur pour créer un objet proxy pour target.

Le handler l’objet a le get et set méthodes, qui interceptent l’opération permettant d’obtenir les valeurs des propriétés et de les définir, respectivement.

Dans le get méthode, nous renvoyons le target[prop]qui est la valeur de prop propriété dans l’objet. prop a la chaîne de nom de propriété, et target est le target objet à partir duquel nous avons créé le proxy.

Dans setnous appelons Reflect.set pour régler le obj valeurs prop propriété à la value valeur. obj est l’objet à partir duquel nous avons créé le proxy, et prop est la chaîne avec le nom de la propriété. value est la valeur à laquelle nous définissons la propriété de l’objet.

À partir des journaux de la console, nous pouvons voir get est appelé lorsque nous essayons d’obtenir une valeur de propriété à partir du proxy objet. Et lorsque nous définissons la propriété dans un objet proxy, le set la méthode est appelée.

Nous pouvons changer ce qui est renvoyé par get et set pour modifier les opérations d’obtention et de définition des valeurs des propriétés d’objet.

Par exemple, nous écrivons :

const target = {
  message1: "hello",
  message2: "everyone",
};

const handler = {
  get(target, prop, receiver) {
    return `foo ${target[prop]}`;
  },
  set(obj, prop, value) {
    return Reflect.set(obj, prop, "bar");
  },
};

const proxy = new Proxy(target, handler);
console.log(proxy.message1);
proxy.message2 = "world";
console.log(proxy.message2);

pour renvoyer une chaîne avec foo avant la valeur de la propriété dans le get méthode. Et nous définissons la valeur de propriété que nous définissons dans le proxy sur 'bar'. En conséquence, nous voyons "foo hello" et "foo bar" à partir des deux journaux de la console, respectivement.

Vue 3 utilise des proxys pour observer les changements de valeurs réactives. Par conséquent, il peut surveiller les changements profondément imbriqués dans la valeur des propriétés sans que nous effectuions aucun travail supplémentaire.

Par exemple, nous écrivons :

<script setup lang="ts">
import { ref } from "vue";

const nestCount = ref({ nested: { count: 0 } });

const incrementDeeply = () => {
  nestCount.value.nested.count++;
};
</script>

<template>
  <div class="card">
    <button type="button" @click="incrementDeeply">
      count is {{ nestCount.nested.count }}
    </button>
  </div>
</template>

pour définir le incrementDeeply fonction. Dans celui-ci, nous incrémentons simplement le nested.count directement la valeur de la propriété.

Cela fonctionne car Vue utilise des proxys JavaScript pour surveiller les modifications profondément imbriquées. Il peut donc récupérer le changement en nested.count immédiatement avec le proxy et restituez le composant en regardant le proxy set les changements de méthode.

Avec l’API Options, nous écrivons :

<template>
  <button type="button" @click="incrementDeeply">
    count is {{ nestCount.nested.count }}
  </button>
</template>

<script>
export default {
  data() {
    return {
      nestCount: {
        nested: { count: 0 },
      },
    };
  },
  methods: {
    incrementDeeply() {
      this.nestCount.nested.count++;
    },
  },
};
</script>

Dans le data méthode, nous définissons la nestCount propriété réactive. À l’intérieur, nous ajoutons le nested.count propriété et définissez-la initialement sur 0.

Ensuite, nous définissons le incrementDeeply méthode et this.nestCount.nested.count augmente de 1 lorsque nous l’appelons. Et nous ajoutons un écouteur d’événement de clic au bouton et appelons incrementDeeply quand on clique dessus.

En raison de l’utilisation de proxys par Vue 3 pour surveiller les changements, nous pouvons simplement définir la valeur de la propriété profondément imbriquée et le composant sera alors restitué.

Par conséquent, pour nous assurer qu’un composant Vue est restitué lorsque nous le souhaitons, nous devons mettre à jour les valeurs des variables réactives.

Conclusion

Nous pouvons obtenir un nouveau rendu des composants Vue quand nous le souhaitons en mettant à jour les valeurs des variables réactives.

Vue 3 devrait être capable de surveiller les valeurs réactives qui sont des objets profondément imbriqués en raison de son utilisation de proxys JavaScript pour surveiller les changements de valeurs réactives.