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

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>

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>

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