Mehrere Möglichkeiten zum Löschen von Arrays in Vue (Zusammenfassung)

1. Einleitung

Vor ein paar Tagen bin ich bei der Arbeit auf ein Problem gestoßen. Wie lösche ich das durch die Verwendung von Reactive in vue3 generierte responsive Array? Normalerweise lösche ich es natürlich so:

  lass array = [1,2,3];
  Array = [];

Allerdings ist diese Methode immer noch etwas problematisch, wenn sie in einem reaktiven Proxy wie diesem verwendet wird:

    lass array = reaktiv([1,2,3]);
    beobachten(()=>[...array],()=>{
      Konsole.log(Array);
    },)
    Array = reaktiv([]);

Da der Verweis auf das ursprüngliche Antwortobjekt verloren geht, geht offensichtlich auch die Überwachung direkt verloren.

2. Mehrere Möglichkeiten zum Löschen von Daten

Als jemand, der über zehn Jahre Programmiererfahrung verfügt und jahrelang geschludert hat, fielen mir natürlich sofort mehrere Lösungen ein.

2.1 Verwenden von ref()

Die Verwendung von ref ist der einfachste Weg:

    Konstante Array = Ref ([1,2,3]);

    beobachten(Array,()=>{
      Konsole.log(Array.Wert);
    },)

    Array.Wert = [];

2.2 Verwenden von Slices

Wie der Name schon sagt, schneidet Slice ein Array in Scheiben und gibt ein neues Array zurück, was dem Slice in der Sprache Go etwas ähnelt. Natürlich sollten Freunde, die React verwendet haben, häufig Slice verwenden. Das Löschen eines Arrays muss nur wie folgt geschrieben werden:

    Konstante Array = Ref ([1,2,3]);

    beobachten(Array,()=>{
      Konsole.log(Array.Wert);
    },)

    Array.Wert = Array.Wert.Slice(0,0);

Seien Sie jedoch vorsichtig bei der Verwendung von Ref.

2.3 Länge wird 0 zugewiesen

Ich persönlich bevorzuge diese Methode, die die Länge direkt auf 0 zuweist:

    Konstante Array = ref ([1,2,3]);

    beobachten(Array,()=>{
      Konsole.log(Array.Wert);
    },{
      tief:wahr
    })

   Array.Wert.Länge = 0;

Darüber hinaus wird dies nur einmal ausgelöst, aber Sie müssen auf die Uhr achten, um tief zu öffnen:

Auf diese Weise ist es jedoch bequemer, reaktiv zu verwenden, und es ist nicht erforderlich, Deep zu aktivieren:

    const array = reaktiv([1,2,3]);

    beobachten(()=>[...array],()=>{
      Konsole.log(Array);
    })

    Array.Länge = 0;

2.4 Verwenden von Splice

Auch die Nebeneffektfunktion splice ist eine Lösung. In diesem Fall kann man auch reaktiv vorgehen:

    const array = reaktiv([1,2,3]);

    beobachten(()=>[...array],()=>{
      Konsole.log(Array);
    },)

    array.splice(0,array.länge)

Beachten Sie jedoch, dass die Uhr mehrmals ausgelöst wird:

Natürlich können Sie auch ref verwenden, beachten Sie aber, dass Sie in diesem Fall deep einschalten müssen:

    Konstante Array = Ref ([1,2,3]);

    beobachten(Array,()=>{
      Konsole.log(Array.Wert);
    },{
      tief:wahr
    })

    array.value.splice(0,array.value.länge)

Sie können jedoch sehen, dass ref wie reaktiv auch mehrmals ausgelöst wird.

3. Fazit

Damit ist dieser Artikel über verschiedene Möglichkeiten zum Löschen eines Arrays in Vue abgeschlossen (Zusammenfassung). Weitere Informationen zum Löschen eines Arrays in Vue finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!