Wie kann die Warnung „Mutierende Requisiten vermeiden' in Vue 2 behoben werden?

Warnung „Mutierende Requisiten“ in Vue 2 vermeiden

Beim Erkunden der Lektion „Vue, Laravel und AJAX“ in der „Vue Schritt-für-Schritt-Anleitung lernen“ In der Serie stoßen Lernende häufig auf eine Warnung:

vue.js:2574 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "list" (found in component )

Ursache der Warnung

Die Warnung wird angezeigt, wenn der Code im Lebenszyklus-Hook „created()“ versucht, die zu ändern Listenstütze. In Vue 2 sind Requisiten unveränderlich, was bedeutet, dass ihre Werte nicht direkt geändert werden können. Das Überschreiben einer Requisite mit einem mutierten Wert löst die Warnung aus.

Lösung

Um diese Warnung zu vermeiden, müssen wir eine Daten- oder berechnete Eigenschaft erstellen, die vom Anfangswert abhängt der Listenstütze. Vue.js aktualisiert diese Eigenschaft dann reaktiv, wenn sich der Status der übergeordneten Komponente ändert, und stellt so sicher, dass das Verhalten der Komponente konsistent bleibt.

Umgestaltung des Codes

Vue.component('task', {
    template: '#task-template',
    props: ['list'],
    data: function () {
        return {
            mutableList: JSON.parse(this.list), // Create data property based on prop
        }
    }
});

Hier In diesem Fall erstellen wir eine mutableList-Dateneigenschaft aus der List-Requisite, die zum Speichern aller lokalen Änderungen verwendet wird.

Zusätzliche Hinweise

• Es ist wichtig zu vermeiden Verwenden Sie denselben Namen für Requisiten und Dateneigenschaften, um Verwechslungen vorzubeugen.
• Das Verständnis von Requisiten und Reaktivität in Vue.js ist für die Aufrechterhaltung der Wartbarkeit des Codes von entscheidender Bedeutung. Weitere Informationen finden Sie im offiziellen Vue.js-Leitfaden.

Das obige ist der detaillierte Inhalt vonWie kann die Warnung „Mutierende Requisiten vermeiden' in Vue 2 behoben werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!