Detaillierte Interpretation der Vue-Rekonstruktionstechnologie

In diesem Artikel werden hauptsächlich die wichtigsten Punkte und eine Zusammenfassung der Vue-Projektrekonstruktionstechnologie vorgestellt. Jetzt werde ich ihn mit Ihnen teilen und Ihnen eine Referenz geben.

Vorwort

Ich war in letzter Zeit zu beschäftigt und mein Blog wurde schon lange nicht mehr aktualisiert. Heute möchte ich eine Pause von meinem vollen Terminkalender einlegen und einige technische Punkte der jüngsten Rekonstruktion des Vue-Projekts kurz zusammenfassen.

Vue-Daten werden aktualisiert, aber die Ansicht wird nicht aktualisiert

Dieses Problem tritt häufig auf, normalerweise ändern sich die Vue-Daten, wenn die Vue-Daten zugewiesen werden, aber die Ansicht wird nicht aktualisiert. Dies ist nicht der technische Punkt der Projektrekonstruktion. Lassen Sie uns die übliche Lösung von vue2.0 mit Ihnen teilen!

Die Lösung lautet wie folgt:

1. Weisen Sie den Wert über die vue.set-Methode zu

Vue.set(数据源, key, newValue)

über die Array.prototype.splice-Methode

Data source.splice(indexOfItem, 1, newValue)

3. Ändern Sie die Länge der Daten

Data source.splice(newLength)

4. Mutationsmethode

Vue.js umschließt die Mutationsmethoden des beobachteten Arrays, sodass sie Ansichtsaktualisierungen auslösen können. Die verpackten Methoden sind:

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

prop-Objekt-Array-Anwendung

In JavaScript sind Objekte und Arrays Referenztypen, die auf denselben Speicherplatz verweisen, wenn prop ein Objekt ist Wenn Sie ein Array oder ein Array erstellen, wirkt sich eine Änderung innerhalb einer untergeordneten Komponente auf den Status der übergeordneten Komponente aus. Wenn wir das Prop-Array oder Objekt in der untergeordneten Komponente ändern, ändern sich auch die übergeordnete Komponente und alle Stellen, an denen die Daten in der Requisite angewendet werden. Ich habe bereits einen Artikel über js Deep Copy und Shallow Copy geschrieben. Wenn Sie interessiert sind, schauen Sie sich die Prinzipien an.

Der Fall ist wie folgt:

<input class="pinput max" type="text" v-model="itemData.data.did">

<script>
export default {
 components: {
 },
 data() {
 },
 props: {
 itemData: Object
 },
 methods: {
 }
};
</script>

Alle auf itemData angewendeten Daten ändern sich!

Vue gibt in der Konsole keine Warnung für die oben genannte Änderung der Requisite aus. Wenn wir die Requisite vollständig ändern oder ihr einen Wert zuweisen, gibt die Konsole eine Warnung aus! Die offizielle Lösung lautet wie folgt:

1. Definieren Sie eine lokale Variable und initialisieren Sie sie mit dem Wert von prop:

props: ['initialCounter'],
data: function () {
 return { counter: this.initialCounter }
}

2. Definieren Sie eine berechnete Eigenschaft, verarbeiten Sie den Wert von prop und geben Sie sie zurück :

props: ['size'],
computed: {
 normalizedSize: function () {
 return this.size.trim().toLowerCase()
 }
}

Einige Fallstricke des V-Modells

Tatsächlich sind V-Modell und Synchronisierung einige syntaktische Zucker, die ich bereits in einem Artikel vorgestellt habe Ähnliche finden Sie auch auf der offiziellen Website Case!

V-Modell-Daten melden manchmal keinen Fehler, wenn sie undefiniert sind. Beachten Sie daher unbedingt, dass das V-Modell nicht undefiniert sein kann, da es sonst zu unerklärlichen Problemen kommt!

Refactoring – Erstellung dynamischer Komponenten

Manchmal haben wir viele ähnliche Komponenten mit nur kleinen Unterschieden. Wir können solche ähnlichen Komponenten in die Konfigurationsdatei schreiben und dynamisch erstellen und Referenzkomponenten

Methode 1: Komponente und is zusammen verwenden

Durch die Verwendung reservierter Elemente und die dynamische Bindung ihrer is-Attribute können Sie mehrere Komponenten auf derselben Halterung dynamisch wechseln Punkt:

var vm = new Vue({
 el: '#example',
 data: {
 currentView: 'home'
 },
 components: {
 home: { /* ... */ },
 posts: { /* ... */ },
 archive: { /* ... */ }
 }
})
<component v-bind:is="currentView">
 <!-- 组件在 vm.currentview 变化时改变！ -->
</component>

Methode 2: Erstellen Sie

<script>
export default {
 data() {
 return {
 };
 },
 render: function(createElement) {
 let _type = bi.chart.data.type;
 let _attr = bi.chart.components[_type]["attr"];
 return createElement(_attr, {
  props: {
  }
 });
 }
};
</script>

bi.chart.components[_type] über die Rendermethode ["attr"] Dies wird dynamisch in der Konfiguration konfiguriert Wenn Sie auf den Typ klicken, wird dieser geändert und das attr-Attribut unter verschiedenen Typen wird übernommen!

Extraktion öffentlicher Attribute

In Projekten verwenden wir oft viele Zustände oder Daten. Wir können viele öffentliche Daten extrahieren und in ein Objekt einfügen. können wir Änderungen in diesem Datenobjekt später überwachen. Daten speichern oder abrufen.

c: {
 handler: function (val, oldVal) { /* ... */ },
 deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
 handler: function (val, oldVal) { /* ... */ },
 immediate: true
},

Sie können die oben genannte ausführliche Überwachung nutzen. Wenn es während der Initialisierung sofort ausgeführt werden muss, können wir die sofortige Ausführungsüberwachung verwenden!

dynamisch geladene Abhängigkeiten erfordern

Wir können die Funktion „Synchronisierung erfordern“ verwenden, um Abhängigkeiten im Code dynamisch zu laden. Mit dem folgenden Echart-Thema können wir beispielsweise dynamisch laden es, wenn wir klicken, um zu wechseln.

require("echarts/theme/"+ data.theme);

Das Import-Laden sollte im Kopf platziert werden. Während der Initialisierung können Sie das Standard-Theme importieren, um es zu laden!

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Erhalten Sie die Wertmethode des standardmäßig ausgewählten Optionsfelds in AngularJS (ausführliches Tutorial)

Über AngularJS How to Verwenden Sie Radio, um eine einzige Auswahl von zwei Optionen zu erreichen (ausführliches Tutorial)

Umfassende Interpretation von Cli in Vue (ausführliches Tutorial)

Die Details sind als Ihre Interpretation der neuen Funktionen von vue-cli 3.0 (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation der Vue-Rekonstruktionstechnologie. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!