So gehen Sie mit dem Fehler „[Vue-Warnung]: Vermeiden Sie es, eine Requisite direkt zu mutieren' um

So gehen Sie mit dem Fehler „[Vue-Warnung]: Vermeiden Sie das direkte Mutieren einer Requisite“ um

Bei der Entwicklung von Webanwendungen mit Vue.js stoßen wir häufig auf einige Warnungen oder Fehler. Eine der häufigsten Warnungen ist „[Vue-Warnung]: Vermeiden Sie es, eine Requisite direkt zu mutieren“, was bedeutet, dass wir eine von der übergeordneten Komponente übergebene Eigenschaft (Requisite) direkt in der Komponente ändern. In diesem Artikel besprechen wir, wie dieser Fehler richtig behandelt wird, und stellen Beispielcode bereit.

Lassen Sie uns zunächst verstehen, warum Vue.js diese Warnung ausgibt. In Vue.js ist der Datenfluss zwischen Komponenten unidirektional und die übergeordnete Komponente übergibt Daten über das Props-Attribut an die untergeordnete Komponente. Dieses Design gewährleistet Datenkonsistenz und Wartbarkeit. Wenn wir diese übergebenen Eigenschaften jedoch direkt in untergeordneten Komponenten ändern, führt dies zu verwirrenden und unvorhersehbaren Daten.

Um den Fehler „[Vue-Warnung]: Vermeiden Sie es, eine Requisite direkt zu mutieren“ zu vermeiden, können wir die folgenden Schritte unternehmen:

1. Speichern Sie die von der übergeordneten Komponente übergebenen Eigenschaften (Requisite) in den Daten der untergeordneten Komponente :

   // 父组件
   <template>
     <ChildComponent :data="data" />
   </template>
   <script>
   export default {
     data() {
    return {
      data: { message: 'Hello Vue!' }
    }
     }
   }
   </script>
   
   // 子组件
   <template>
     <div>{{ data.message }}</div>
   </template>
   <script>
   export default {
     props: ['data'],
     data() {
    return {
      localData: this.data
    }
     }
   }
   </script>

   Nach dem Login kopieren

   In diesem Beispiel speichern wir das von der übergeordneten Komponente übergebene Datenattribut in den localData der untergeordneten Komponente. Auf diese Weise können wir localData in der untergeordneten Komponente frei ändern, ohne die Daten der übergeordneten Komponente zu ändern. Beachten Sie, dass wir this.data in der Datenfunktion der untergeordneten Komponente verwenden, um den Wert des Datenattributs abzurufen, da sich dies in dieser Funktion auf die Instanz der untergeordneten Komponente bezieht.

2. Verwenden Sie berechnete Eigenschaften, um Änderungen an Requisitenattributen zu verarbeiten:

   // 父组件
   <template>
     <ChildComponent :message="message" />
   </template>
   <script>
   export default {
     data() {
    return {
      message: 'Hello Vue!'
    }
     }
   }
   </script>
   
   // 子组件
   <template>
     <div>{{ computedMessage }}</div>
   </template>
   <script>
   export default {
     props: ['message'],
     computed: {
    computedMessage: {
      get() {
        return this.message;
      },
      set(value) {
        // 禁止直接修改props属性
        console.warn("[Vue warn]: Avoid mutating a prop directly");
      }
    }
     }
   }
   </script>

   Nach dem Login kopieren

   In diesem Beispiel verwenden wir eine berechnete Eigenschaft, um Änderungen an Requisitenattributen zu verarbeiten. In der get-Methode geben wir den Wert des props-Attributs zurück; in der set-Methode verbieten wir die direkte Änderung des props-Attributs und geben eine Warnmeldung aus. Auf diese Weise können wir sicherstellen, dass das props-Attribut schreibgeschützt ist.

3. Verwenden Sie Ereignisse, um die übergeordnete Komponente über Eigenschaftsänderungen zu benachrichtigen:

   // 父组件
   <template>
     <ChildComponent :message="message" @update-message="message => this.message = message" />
   </template>
   <script>
   export default {
     data() {
    return {
      message: 'Hello Vue!'
    }
     }
   }
   </script>
   
   // 子组件
   <template>
     <button @click="updateMessage">Update Message</button>
   </template>
   <script>
   export default {
     props: ['message'],
     methods: {
    updateMessage() {
      const newMessage = 'New Message';
      // 触发自定义事件来通知父组件进行属性的修改
      this.$emit('update-message', newMessage);
    }
     }
   }
   </script>

   Nach dem Login kopieren

   In diesem Beispiel löst die untergeordnete Komponente beim Klicken auf die Schaltfläche ein benutzerdefiniertes Ereignis mit dem Namen „update-message“ aus und übermittelt gleichzeitig die neue Nachricht Zeit als Parameter. Nach dem Empfang des Ereignisses ändert die übergeordnete Komponente ihr Nachrichtenattribut in eine neue Nachricht.

Zusammenfassend lässt sich sagen, dass der Schlüssel zum Umgang mit dem Fehler „[Vue-Warnung]: Vermeiden Sie die direkte Mutation einer Requisite“ darin besteht, die einseitigen Datenflussregeln von Vue.js zu befolgen und die übergebenen Eigenschaften nicht direkt zu ändern die übergeordnete Komponente. Stattdessen können Sie Eigenschaften in den Daten der untergeordneten Komponente speichern, berechnete Eigenschaften zum Abrufen und Festlegen von Eigenschaften verwenden oder Ereignisse verwenden, um übergeordnete Komponenten über Eigenschaftsänderungen zu benachrichtigen. Durch diese Methoden können wir Datenchaos und Fehler vermeiden und die Stabilität und Wartbarkeit von Webanwendungen verbessern.

Referenzdokumentation:

• Vue.js offizielle Dokumentation: https://vuejs.org/

Das obige ist der detaillierte Inhalt vonSo gehen Sie mit dem Fehler „[Vue-Warnung]: Vermeiden Sie es, eine Requisite direkt zu mutieren' um. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!