So verwenden Sie ein Objekt mit V-Modell in Vue

Jeder ist mit der v-model-Direktive in Vue.js bestens vertraut, die eine bidirektionale Datenbindung zwischen Komponenten implementiert. Bei der manuellen Implementierung von v-model für eine benutzerdefinierte Komponente treten jedoch normalerweise einige Probleme auf.

Der übliche Ansatz ist wie folgt:

<code class="language-javascript">const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
<template></template></code>

Bitte beachten Sie, dass wir den Wert der modelValue-Requisite innerhalb der Komponente nicht ändern. Stattdessen übergeben wir den aktualisierten Wert über die Methode emit an die übergeordnete Komponente zurück, und die übergeordnete Komponente nimmt die eigentlichen Änderungen vor. Dies liegt daran, dass: Untergeordnete Komponenten den Status der übergeordneten Komponente nicht beeinflussen sollten, was den Datenfluss verkompliziert und das Debuggen erschwert.

Wie in der Vue-Dokumentation angegeben, sollten Requisiten nicht innerhalb von untergeordneten Komponenten geändert werden. Wenn Sie dies tun, gibt Vue eine Warnung in der Konsole aus.

Wie geht es dem Probanden?

Objekte und Arrays in JavaScript sind ein Sonderfall, da sie als Referenz übergeben werden. Das bedeutet, dass Komponenten verschachtelte Eigenschaften von Objekt-Requisiten direkt ändern können. Vue warnt jedoch nicht vor Änderungen an verschachtelten Objekteigenschaften (das Verfolgen dieser Änderungen führt zu Leistungseinbußen). Daher können solche unerwarteten Änderungen Probleme in Ihrer Anwendung verursachen, die schwer zu erkennen und zu debuggen sind.

Meistens verwenden wir den Basiswert als v-model. In einigen Fällen, beispielsweise beim Erstellen einer Formularkomponente, benötigen wir jedoch möglicherweise ein benutzerdefiniertes v-model, das Objekte verarbeiten kann. Dies führt zu einer wichtigen Frage:

Wie implementiert man einen benutzerdefinierten v-model zur Handhabung von Objekten und vermeidet gleichzeitig die oben genannten Fallstricke?

Diskussionsfragen

Eine Möglichkeit besteht darin, eine beschreibbare berechnete Eigenschaft oder defineModelHilfsfunktion zu verwenden. Allerdings haben beide Lösungen einen erheblichen Nachteil: Sie verändern direkt das ursprüngliche Objekt, was dem Zweck der Aufrechterhaltung eines klaren Datenflusses zuwiderläuft.

Um dieses Problem zu veranschaulichen, schauen wir uns ein Beispiel einer „Formular“-Komponente an. Diese Komponente ist so konzipiert, dass sie eine aktualisierte Kopie des Objekts an die übergeordnete Komponente zurückgibt, wenn sich der Wert im Formular ändert. Wir werden versuchen, dies mithilfe beschreibbarer berechneter Eigenschaften zu erreichen.

In diesem Beispiel ändert die beschreibbare berechnete Eigenschaft immer noch das ursprüngliche Objekt.

<code class="language-javascript">import { computed } from 'vue';
import { cloneDeep } from 'lodash-es';

type Props = {
  modelValue: { name: string; email: string; };
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({ name: '', email: '' }),
});

const emit = defineEmits<{
  'update:modelValue': [value: Props['modelValue']];
}>();


const formData = computed({
  // 返回的getter对象仍然是可变的
  get() {
    return props.modelValue;
  },
  // 注释掉setter仍然会修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});</code>

Dies funktioniert nicht, da das vom Getter zurückgegebene Objekt immer noch veränderbar ist, was dazu führt, dass das ursprüngliche Objekt unerwartet geändert wird.

defineModelDas Gleiche. Da update:modelValue nicht von der Komponente ausgegeben wird und die Objekteigenschaften ohne Warnung geändert werden.

Lösung

Die „Vue-Methode“, mit dieser Situation umzugehen, besteht darin, interne reaktive Werte zur Darstellung von Objekten zu verwenden und zwei Beobachter zu implementieren:

1. Ein Beobachter überwacht die modelValue Requisite auf Änderungen und aktualisiert den internen Wert. Dadurch wird sichergestellt, dass der interne Status die neuesten von der übergeordneten Komponente übergebenen Prop-Werte widerspiegelt.
2. Ein Beobachter beobachtet Veränderungen der inneren Werte. Wenn der interne Wert aktualisiert wird, wird eine neue geklonte Version des Objekts an die übergeordnete Komponente ausgegeben, um eine direkte Änderung des Originalobjekts zu vermeiden.

Um eine endlose Rückkopplungsschleife zwischen diesen beiden Beobachtern zu verhindern, müssen wir sicherstellen, dass Aktualisierungen der modelValue-Requisite den Beobachter nicht versehentlich erneut für den inneren Wert auslösen.

<code class="language-javascript">const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
<template></template></code>

Ich weiß, was Sie denken: „Das ist zu viel!“ Mal sehen, wie wir es noch weiter vereinfachen können.

Vereinfachen Sie Ihre Lösung mit VueUse

Das Extrahieren dieser Logik in eine wiederverwendbare zusammengesetzte Funktion ist eine großartige Möglichkeit, den Prozess zu vereinfachen. Aber die gute Nachricht ist: Wir müssen das nicht einmal tun! Die kombinierte Funktion useVModel in VueUse kann uns bei der Bewältigung dieses Problems helfen!

VueUse ist eine leistungsstarke Vue-Dienstprogrammbibliothek, die oft als „Schweizer Taschenmesser“ unter den zusammengesetzten Dienstprogrammen bezeichnet wird. Es ist vollständig baumschüttelbar, sodass wir nur die Teile verwenden können, die wir benötigen, ohne uns Gedanken über eine Vergrößerung des Pakets machen zu müssen.

Hier ist ein Beispiel vor dem Refactoring mit useVModel:

<code class="language-javascript">import { computed } from 'vue';
import { cloneDeep } from 'lodash-es';

type Props = {
  modelValue: { name: string; email: string; };
};

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => ({ name: '', email: '' }),
});

const emit = defineEmits<{
  'update:modelValue': [value: Props['modelValue']];
}>();


const formData = computed({
  // 返回的getter对象仍然是可变的
  get() {
    return props.modelValue;
  },
  // 注释掉setter仍然会修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});</code>

Viel einfacher!

Das ist es! Wir haben untersucht, wie man Objekte mit v-model in Vue richtig verwendet, ohne sie direkt von untergeordneten Komponenten zu ändern. Durch die Verwendung von Beobachtern oder die Nutzung kompositorischer Funktionen wie useVModel von VueUse können wir eine klare und vorhersehbare Zustandsverwaltung in unserer Anwendung aufrechterhalten.

Hier ist ein Stackblitz-Link mit allen Beispielen in diesem Artikel. Fühlen Sie sich frei, zu erkunden und zu experimentieren.

Vielen Dank fürs Lesen und viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie ein Objekt mit V-Modell in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!