Comment utiliser la directive v-once pour implémenter le rendu unique de la liaison de données dans Vue-Voir.js-php.cn

Comment utiliser la directive v-once pour implémenter le rendu unique de la liaison de données dans Vue

王林

Libérer： 2023-06-11 13:56:04

original

1123 Les gens l'ont consulté

Vue est un framework JavaScript frontal populaire qui fournit de nombreuses instructions pour simplifier le processus de liaison de données. L'une des instructions très utiles est v-once. Dans cet article, nous approfondirons l'utilisation de la directive v-once et comment implémenter le rendu unique lié aux données dans Vue.

Qu'est-ce que la commande v-once ?

v-once est une directive dans Vue. Sa fonction est de mettre en cache les résultats de rendu des éléments ou des composants afin que leur processus de rendu puisse être ignoré dans les mises à jour ultérieures. Cela peut grandement améliorer les performances de rendu, en particulier lorsque les données ne changent pas fréquemment.

La syntaxe d'utilisation de la directive v-once est très simple. Il vous suffit d'ajouter cette directive sur l'élément ou le composant qui doit être mis en cache :

<template>
  <div v-once>
    {{ message }}
  </div>
</template>

Copier après la connexion

Dans le code ci-dessus, nous avons ajouté la directive v-once au fichier.

element , ce qui signifie que Vue calculera le contenu de l'élément uniquement lors de son premier rendu et mettra le résultat en cache. Même si les données du message changent, Vue ne recalculera pas le contenu de l'élément.

Utilisation de la directive v-once

En plus d'utiliser la directive v-once sur un seul élément, elle peut également être utilisée sur des composants. Utiliser la directive v-once dans un composant revient à l'utiliser sur un élément, il vous suffit d'attacher la directive à l'élément racine du composant :

<template>
  <my-component v-once :data="data"></my-component>
</template>

Copier après la connexion

Dans le code ci-dessus, on utilise sur l'élément racine du composant Composant my-component La directive v-once est transmise et un attribut nommé data est transmis. Cela signifie que nous ne souhaitons rendre le composant qu'une seule fois et que Vue ne restituera pas le composant si la propriété data change.

Il convient de noter que la directive v-once ne peut être utilisée que pour du contenu statique, c'est-à-dire du contenu qui ne contient pas d'expressions de liaison. Cela signifie que vous ne pouvez pas utiliser de syntaxe d'interpolation ou d'autres expressions de liaison à l'intérieur d'un élément ou d'un composant lorsque vous utilisez la directive v-once.

Bien sûr, il existe d'autres utilisations de l'instruction v-once, telles que :

L'utilisation de l'instruction v-once sur les éléments de la boucle v-for peut grandement améliorer les performances du rendu de liste
Utilisée dans ; templates La directive v-once peut mettre en cache les résultats de rendu de l'ensemble du modèle pour les réutiliser dans les rendus ultérieurs.

Comment implémenter le rendu unique de la liaison de données dans Vue

Maintenant que nous avons compris l'utilisation de la directive v-once, nous allons montrer ci-dessous comment utiliser cette directive pour implémenter le rendu unique de la liaison de données dans Vue. Vue.

Supposons que nous ayons un composant de liste d'utilisateurs contenant plusieurs éléments de liste d'utilisateurs. Lorsque nous cliquons sur un bouton sur un élément de liste, le statut de l'élément de liste passe, par exemple, à un statut supprimé. À ce stade, nous souhaitons que l'élément de liste disparaisse de la liste, mais en même temps, nous souhaitons que son statut reste pour les opérations ultérieures.

Pour réaliser cette fonctionnalité, nous pouvons utiliser la directive v-once dans le composant élément de liste :

<template>
  <li v-if="!deleted" v-once>
    {{ user.name }}
    <button @click="onDelete">删除</button>
  </li>
</template>

<script>
export default {
  props: ['user'],
  data() {
    return {
      deleted: false
    };
  },
  methods: {
    onDelete() {
      this.deleted = true;
    }
  }
};
</script>

Copier après la connexion

Dans le code ci-dessus, nous avons utilisé la directive v-once sur l'élément

Le contenu de l'élément de liste est calculé lors du premier rendu. Lorsque l'utilisateur clique sur le bouton Supprimer, nous définissons l'attribut supprimé sur true afin que Vue ne restitue pas l'élément de liste.

À l'heure actuelle, bien que l'élément de liste ait disparu de la liste, son statut est toujours conservé. De cette façon, nous obtenons un rendu unique de la liaison de données.

Résumé

Dans Vue, la directive v-once peut être utilisée pour mettre en cache des éléments ou des composants afin que leur processus de rendu puisse être ignoré dans les mises à jour ultérieures, améliorant ainsi les performances de rendu. Dans certains scénarios spécifiques, vous pouvez utiliser l'instruction v-once pour obtenir un rendu unique de la liaison de données afin de répondre à certains besoins particuliers. Il convient de noter que la directive v-once s'applique uniquement au contenu statique, c'est-à-dire au contenu qui ne contient pas d'expressions de liaison.

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!