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:

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
<template></template>

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.

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對(duì)象仍然是可變的
  get() {
    return props.modelValue;
  },
  // 注釋掉setter仍然會(huì)修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});

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.

const props = defineProps(['modelValue']);
const emit = defineEmits(['update:modelValue']);
<template></template>

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:

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對(duì)象仍然是可變的
  get() {
    return props.modelValue;
  },
  // 注釋掉setter仍然會(huì)修改prop
  set(newValue) {
    emit('update:modelValue', cloneDeep(newValue));
  },
});

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!