10 Fehler, die Sie bei der Verwendung von Vue 3 vermeiden sollten

        Vue 3 läuft nun schon seit geraumer Zeit stabil. Viele Codebasen verwenden es in der Produktion und alle anderen müssen irgendwann auf Vue 3 migrieren. Ich hatte jetzt Gelegenheit, es zu nutzen und habe meine Fehler dokumentiert, die Sie vielleicht vermeiden möchten.

Deklarieren Sie primitive Werte mit Reactive

Früher waren Datendeklarationen ziemlich einfach, aber jetzt stehen uns viele Hilfsfunktionen zur Verfügung. Die aktuellen Regeln sind:      

• Nutzungserklärung reactive_Object, Array, Map, Set

• Nutzungserklärung ref_String, Number, Boolean

Wenn Sie es für einen primitiven Wert verwenden reactive, wird eine Warnung zurückgegeben und der Wert wird nicht reaktiv gemacht.

/* DOES NOT WORK AS EXPECTED */
<script setup>
import { reactive } from "vue";

const count = reactive(0);
</script>

  [Vue-Warnung]: Wert kann nicht reaktiv gemacht werden

 Paradoxerweise ist auch ein anderer Weg möglich. Verwenden Sie beispielsweise, refum zu deklarieren, dass a Arrayintern aufgerufen wird reactive.

Reaktive Daten zerstören

Nehmen wir an, Sie haben ein reaktives Objekt mit countEigenschaften und einer Schaltfläche zum Erhöhencount。

<template>
  Counter: {
   
   { state.count }}
  <button @click="add">Increase</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({ count: 0 });

    function add() {
      state.count++;
    }

    return {
      state,
      add,
    };
  },
};
</script>

 Die obige Logik ist ziemlich einfach und funktioniert wie erwartet, aber Sie können die Destrukturierung von Javascript nutzen, um Folgendes zu tun:

/* DOES NOT WORK AS EXPECTED */
<template>
  <div>Counter: {
   
   { count }}</div>
  <button @click="add">Increase</button>
</template>

<script>
import { reactive } from "vue";
export default {
  setup() {
    const state = reactive({ count: 0 });

    function add() {
      state.count++;
    }

    return {
      ...state,
      add,
    };
  },
};
</script>

 Der Code sieht gleich aus und sollte nach unserer bisherigen Erfahrung funktionieren, aber tatsächlich funktioniert das reaktive Tracking von Vue über den Zugriff auf Eigenschaften. Dies bedeutet, dass wir ein reaktives Objekt nicht zuweisen oder zerstören können, da die reaktive Verbindung zur ersten Referenz unterbrochen ist. Dies ist eine der Einschränkungen bei der Verwendung reaktiver Hilfsfunktionen.

Verwirrt über .value

        Ebenso refkann es schwierig sein, sich an ein skurriles Muster zu gewöhnen. RefEmpfängt einen Wert und gibt ein reaktives Objekt zurück. Der Wert ist unter den Eigenschaften im Objekt verfügbar .value.

const count = ref(0)

console.log(count) // { value: 0 }
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

refBei Verwendung in einer Vorlagendatei wird es  jedoch entpackt und ist nicht erforderlich .value.

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

<template>
  <button @click="increment">
    {
   
   { count }} // no .value needed
  </button>
</template>

 Aber sei vorsichtig! Das Entpacken funktioniert nur für Eigenschaften der obersten Ebene. Der folgende Codeausschnitt wird generiert [object Object].

// DON'T DO THIS
<script setup>
import { ref } from 'vue'

const object = { foo: ref(1) }

</script>

<template>
  {
   
   { object.foo + 1 }}  // [object Object]
</template>

 Es braucht Zeit, es richtig zu machen .value. Ich benutze es immer häufiger, obwohl ich manchmal vergesse, wie man es benutzt.

auslösendes Ereignis

        Seit der ersten Veröffentlichung von Vue können untergeordnete Komponenten emitüber .com mit übergeordneten Komponenten kommunizieren. Sie müssen lediglich einen benutzerdefinierten Ereignis-Listener hinzufügen, um auf ein Ereignis zu warten.

// 子组件
this.$emit('my-event')

// 父组件
<my-component @my-event="doSomething" />

Jetzt emitmuss es defineEmitsmit deklariert werden.

<script setup>
const emit = defineEmits(['my-event'])
emit('my-event')
</script>

 Beachten Sie außerdem, dass defineEmitsweder und definePropsnoch importiert werden müssen. Sie sind bei Verwendung script setupautomatisch verfügbar .

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>

 Da das Ereignis nun deklariert werden muss, besteht schließlich keine Notwendigkeit, .nativeden Modifikator zu verwenden, er wurde sogar entfernt.

zusätzliche Optionen deklarieren

Die Optionen-API-Methode verfügt über mehrere Eigenschaften script setup, die in nicht unterstützt werden.

• Name
• inheritAttrs
• Anpassungsoptionen, die je nach Plugin oder Bibliothek erforderlich sind

Die Lösung besteht darin, script setupzwei verschiedene Skripte in derselben Komponente festzulegen, wie in RFC [1] definiert.

<script>
  export default {
    name: 'CustomName',
    inheritAttrs: false,
    customOptions: {}
  }
</script>

<script setup>
  // script setup logic
</script>

Verwenden Sie reaktionsfähige Transformationen

Reaktivitätstransformation ist eine experimentelle, aber umstrittene Funktion [2] von Vue 3, die darauf abzielt, die Deklaration von Komponenten zu vereinfachen. Die Idee besteht darin, Transformationen zur Kompilierungszeit zu nutzen, um eine automatisch zu entpacken refund .valueobsolet zu machen. Aber jetzt ist es veraltet und wird in Vue 3.3 entfernt. Es ist immer noch als Paket verfügbar, aber da es nicht Teil des Vue-Kerns ist, ist es am besten, keine Zeit darin zu investieren.

Definieren Sie asynchrone Komponenten

Bisher wurde eine asynchrone Komponente durch Einschließen in eine Funktion deklariert.

const asyncModal = () => import('./Modal.vue')

 Ab Vue 3 müssen asynchrone Komponenten defineAsyncComponentmithilfe von Hilfsfunktionen explizit definiert werden.

import { defineAsyncComponent } from 'vue'

const asyncModal = defineAsyncComponent(() => import('./Modal.vue'))