Vue ändert den Wert und verbietet das Auslösen

In Vue.js wird die Komponente durch bidirektionale Datenbindung neu gerendert, wenn sich die Daten ändern. Manchmal möchten wir jedoch nicht, dass einige Datenänderungen ein erneutes Rendering auslösen um zu verhindern, dass Vue den Wert erneut rendert.

Daten in Vue reagieren.

Daten im Vue-Framework reagieren. Das bedeutet, dass Vue die neuen Daten in der Ansicht neu rendert, wenn Daten geändert werden. Diese Funktion macht die Seitenentwicklung einfacher und reibungsloser.

Wenn sich beispielsweise die Daten ändern, wird die folgende Vue-Komponente automatisch neu gerendert:

<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>

Im obigen Code handelt es sich bei der Nachricht um die reaktiven Daten von Vue, aber jeder Klick auf die Schaltfläche „Nachricht ändern“ führt dazu, dass die gesamte Komponente neu gerendert wird. rendern, was die Leistung beeinträchtigen kann. Hier erfahren Sie, wie Sie dies vermeiden können.

Verwenden Sie die Methode $forceUpdate

Vue bietet eine Komponentenmethode $forceUpdate(), die ein erneutes Rendern der Komponente erzwingen kann. Die Methode $forceUpdate() löst jedoch kein tiefes Neu-Rendering aus. Das heißt, wenn Sie ein Datenelement ändern, rendert Vue nur die Komponente und Unterkomponenten neu, die diese Daten enthalten.

Wenn Sie $forceUpdate() während des Komponenten-Rendering-Zyklus aufrufen, rendert die Komponente die gesamte Komponente neu, auch wenn sich die Daten nicht geändert haben. Daher können wir verhindern, dass die Komponente gerendert wird, indem wir die Methode $forceUpdate() aufrufen, wenn sich die Daten ändern. Zum Beispiel:

<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>

Im obigen Beispiel haben wir die Methode $forceUpdate() aufgerufen, während wir die Datennachricht geändert haben. Auf diese Weise rendert Vue die Komponente nur neu, ohne die Leistung anderer Komponenten zu beeinträchtigen.

Verwenden Sie die Vue-Set-Methode

Vue bietet eine Vue-Set-Methode, mit der Sie einem Objekt eine neue responsive Eigenschaft hinzufügen oder aktualisieren können. Diese Methode wird normalerweise verwendet, um neue Dom-Elemente hinzuzufügen oder einige Elemente zu steuern, die nicht im Vue-Zyklus angezeigt werden müssen. Durch die Verwendung von vue-set können Leistungsprobleme vermieden werden, die durch wiederholte Aufrufe von forceUpdate verursacht werden:

<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>

Wenn wir im obigen Code auf die Schaltfläche klicken, fügen wir neue Zeichen am Anfang der Nachricht hinzu und verwenden die Set-Methode, um Vue zu benachrichtigen, ein neues hinzuzufügen Antwortformelattribut, damit Sie die Leistungsprobleme der Methode „forceUpdate“ vermeiden können.

Abschließende Gedanken

In Vue löst die Änderung reaktionsfähiger Daten das erneute Rendern der Komponente aus, was unsere Entwicklung reibungsloser gestalten kann. Aber manchmal müssen wir die Anzahl der erneuten Renderings reduzieren, um die Seitenleistung zu verbessern. In diesem Artikel haben wir vorgestellt, wie Sie das Rendern von Komponenten verhindern können, indem Sie die Methoden $forceUpdate und vue-set aufrufen. Gleichzeitig müssen wir auf Leistungsprobleme und Codeeffizienz achten und eine geeignete Methode zur Implementierung der Funktion zum Deaktivieren der Auslösung von Wertänderungen auswählen.

Das obige ist der detaillierte Inhalt vonVue ändert den Wert und verbietet das Auslösen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!