Vue change de valeur et interdit le déclenchement

Dans Vue.js, grâce à la liaison de données bidirectionnelle, lorsque les données du composant changent, le composant sera restitué, mais parfois nous ne voulons pas que certaines modifications de données déclenchent un nouveau rendu. Cet article expliquera comment. pour interdire à Vue de modifier la valeur.

Les données dans Vue sont réactives

Les données dans le framework Vue sont réactives. Cela signifie que lorsque les données sont modifiées, Vue restituera les nouvelles données dans la vue. Cette fonctionnalité rend le développement de pages plus facile et plus fluide.

Par exemple, lorsque les données changent, le composant Vue suivant sera automatiquement restitué :

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Click me to change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Hello Vue.js";
    },
  },
};
</script>

Dans le code ci-dessus, le message est les données réactives de Vue, mais chaque clic sur le bouton Modifier le message entraînera le nouveau rendu du composant entier. rendu, ce qui peut affecter les performances. Voici comment éviter cela.

Utilisez la méthode $forceUpdate

Vue fournit une méthode de composant $forceUpdate() qui peut forcer le rendu du composant. Cependant, la méthode $forceUpdate() ne déclenche pas profondément le nouveau rendu. Cela signifie que si vous modifiez une donnée, Vue restituera uniquement le composant et les sous-composants qui contiennent ces données.

Si vous appelez $forceUpdate() pendant le cycle de rendu du composant, le composant restituera l'intégralité du composant, même si les données n'ont pas changé. Par conséquent, nous pouvons empêcher le rendu du composant en appelant la méthode $forceUpdate() lorsque les données changent. Par exemple :

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Click me to change message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello world",
    };
  },
  methods: {
    changeMessage() {
      this.message = "Hello Vue.js";
      this.$forceUpdate();
    },
  },
};
</script>

Dans l'exemple ci-dessus, nous avons appelé la méthode $forceUpdate() lors de la modification du message de données. De cette façon, Vue restituera uniquement le composant sans affecter les performances des autres composants.

Utilisez la méthode vue-set

Vue fournit une méthode vue-set qui peut ajouter ou mettre à jour une nouvelle propriété réactive à un objet. Cette méthode est généralement utilisée pour ajouter de nouveaux éléments dom ou contrôler certains éléments qui n'ont pas besoin d'être affichés dans le cycle Vue. L'utilisation de vue-set peut éviter les problèmes de performances causés par des appels répétés à forceUpdate :

<template>
  <div>
    <p>The message start with "{{ message.charAt(0) }}"</p>
    <button @click="prependChar">Click me to add new char</button>
  </div>
</template>

<script>
import {set} from 'vue'

export default {
  data() {
    return {
      message: "Hello world",
    };
  },
  methods: {
    prependChar() {
      const newChar = String.fromCharCode(
        this.message.charCodeAt(0) + 1
      );
      set(this.message, 0, newChar);
    },
  },
};
</script>

Dans le code ci-dessus, lorsque nous cliquons sur le bouton, ajoutons de nouveaux caractères au début du message et utilisons la méthode set pour avertir Vue d'ajouter un nouveau attribut de formule de réponse, afin que vous puissiez éviter les problèmes de performances de la méthode forceUpdate.

Réflexions finales

Dans Vue, la modification des données réactives déclenchera le nouveau rendu du composant, ce qui peut rendre notre développement plus fluide. Mais parfois, nous devons réduire le nombre de nouveaux rendus pour améliorer les performances des pages. Dans cet article, nous avons présenté comment empêcher le rendu des composants en appelant la méthode $forceUpdate et la méthode vue-set. Dans le même temps, nous devons prêter attention aux problèmes de performances et d'efficacité du code, et choisir une méthode appropriée pour implémenter la fonction de désactivation du déclenchement des changements de valeur.

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!