Welche Fehler sollten Sie in Vue3 vermeiden?

Primitive Werte mit Reactive deklarieren

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

• Verwenden Sie reactive, um Object, Array, Map, Set zu deklarieren. reactive声明Object, Array, Map, Set

• 使用ref声明String, Number, Boolean

为一个原始值使用reactive会返回一个警告，并且该值不会成为可响应式数据。

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

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

矛盾的是，另一种方式是可行的。例如，使用ref来声明一个Array会在内部调用reactive。

解构响应式数据

假设你有一个响应式对象拥有count属性，并且有一个按钮来递增count。

<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>

上述逻辑相当直接，而且如预期的那样工作，但你可能会利用javascript的解构来做以下事情：

/* 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>

代码看起来是一样的，而且根据我们以前的经验应该是可行的，但事实上，Vue的响应式跟踪是通过属性访问进行的。这意味着我们不能赋值或解构一个响应式对象，因为与第一个引用的响应式连接已经断开。这就是使用响应式帮助函数的局限性之一。

对.value感到困惑

同样的，使用ref的一个怪异模式可能也很难习惯。

Ref接收一个值，并返回响应式对象。该值在对象内部的.value属性下可用。

const count = ref(0)

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

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

但是ref在模板文件中使用时会被解包，并且不需要.value。

<script setup>
import { ref } from &#39;vue&#39;

const count = ref(0)

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

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

但是要小心了！解包只在顶级属性中生效。下面的代码片段会生成[object Object]。

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

const object = { foo: ref(1) }

</script>

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

正确地使用.value需要时间。尽管某些时候我会忘记如何使用，但是使用它的频率越来越高。

触发事件

自从Vue的最初发布以来，子组件就可以与父组件使用emit来通信。你只需要添加自定义事件监听器来监听一个事件。

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

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

现在，emit需要使用defineEmits来进行声明。

<script setup>
const emit = defineEmits([&#39;my-event&#39;])
emit(&#39;my-event&#39;)
</script>

另一件要记住的事情是，defineEmits和defineProps都不需要被导入。它们在使用script setup时自动可用。

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

const emit = defineEmits([&#39;change&#39;, &#39;delete&#39;])
// setup code
</script>

最后，由于事件现在必须被声明，所以不需要使用.native修饰符，事实上它已经被移除了。

声明附加选项

Options API方法有几个属性在script setup中是不被支持的。

• name

• inheritAttrs

• 插件或库所需的自定义选项

解决办法是按照script setupRFC的定义，在同一个组件中设置两个不同的脚本。

<script>
  export default {
    name: &#39;CustomName&#39;,
    inheritAttrs: false,
    customOptions: {}
  }
</script>

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

使用响应式转换

Reactivity Transform是Vue 3的一个实验性但有争议的功能，目的是简化组件的声明方式。它的想法是利用编译时的转换来自动解包一个ref，并使.value过时。但现在它被放弃了，并将在Vue 3.3中被删除。它仍然可以作为一个包使用，但由于它不是Vue核心的一部分，所以最好不要在它身上投入时间。

定义异步组件

以前的异步组件是通过将其包含在一个函数中来声明的。

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

从 Vue 3开始，异步组件需要使用defineAsyncComponent帮助函数来显式地定义。

import { defineAsyncComponent } from 'vue'

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

在模板中使用多余的包裹元素

在Vue 2中，组件模板需要一个单一的根元素，这有时会引入不必要的包裹元素。

<!-- Layout.vue -->
<template>
  <div>
    <header>...</header>
    <main>...</main>
    <footer>...</footer>
  </div>
</template>

现在不再需要这样了，因为现在支持多个根元素。????

<!-- Layout.vue -->
<template>
  <header>...</header>
  <main v-bind="$attrs">...</main>
  <footer>...</footer>
</template>

使用错误的生命周期

所有的组件生命周期事件都被重新命名，要么添加on

Verwenden Sie ref um String, Number, Boolean zu deklarieren

Die Verwendung von reactive für einen primitiven Wert gibt eine Warnung zurück und der Wert wird nicht zu reaktiven Daten. 🎜rrreee🎜Paradoxerweise ist auch ein anderer Weg möglich. Wenn Sie beispielsweise ref verwenden, um ein Array zu deklarieren, wird intern reactive aufgerufen. 🎜🎜Reaktive Daten dekonstruieren🎜🎜Angenommen, Sie haben ein reaktives Objekt mit einer count-Eigenschaft und einer Schaltfläche zum Erhöhen von count. 🎜rrreee🎜Die obige Logik ist ziemlich einfach und funktioniert wie erwartet, aber Sie könnten wahrscheinlich die Destrukturierung von JavaScript nutzen, um Folgendes zu tun: 🎜rrreee🎜Der Code sieht gleich aus und basierend auf unseren bisherigen Erfahrungen sollte es möglich sein, aber Tatsächlich erfolgt die reaktive Nachverfolgung von Vue über den Zugriff auf Immobilien. Dies bedeutet, dass wir ein reaktives Objekt nicht zuweisen oder zerstören können, da die reaktive Verbindung zur ersten Referenz unterbrochen wurde. Dies ist eine der Einschränkungen bei der Verwendung reaktiver Hilfsfunktionen. 🎜🎜Verwirrt durch .value 🎜🎜Ebenso kann es schwierig sein, sich an die Verwendung von ref in einem seltsamen Muster zu gewöhnen. 🎜🎜Ref empfängt einen Wert und gibt ein reaktives Objekt zurück. Der Wert ist innerhalb des Objekts unter der Eigenschaft .value verfügbar. 🎜rrreee🎜Aber ref wird entpackt, wenn es in Vorlagendateien verwendet wird, und .value wird nicht benötigt. 🎜rrreee🎜Aber Vorsicht! Das Entpacken wird nur in Eigenschaften der obersten Ebene wirksam. Der folgende Codeausschnitt generiert [object Object]. 🎜rrreee🎜Die korrekte Verwendung von .value braucht Zeit. Obwohl ich manchmal vergesse, wie man es benutzt, benutze ich es immer häufiger. 🎜🎜Ereignisse auslösen🎜🎜Seit der ersten Veröffentlichung von Vue können untergeordnete Komponenten mithilfe von emit mit übergeordneten Komponenten kommunizieren. Sie müssen lediglich einen benutzerdefinierten Ereignis-Listener hinzufügen, um auf ein Ereignis zu warten. 🎜rrreee🎜Jetzt muss emit mit defineEmits deklariert werden. 🎜rrreee🎜Außerdem ist zu beachten, dass weder defineEmits noch defineProps importiert werden müssen. Sie sind automatisch verfügbar, wenn Sie Skript-Setup verwenden. 🎜rrreee🎜Da Ereignisse nun deklariert werden müssen, besteht keine Notwendigkeit, den Modifikator .native zu verwenden, er wurde sogar entfernt. 🎜🎜Deklarieren Sie zusätzliche Optionen🎜🎜Die Optionen-API-Methode verfügt über mehrere Eigenschaften, die im Skript-Setup nicht unterstützt werden. 🎜🎜🎜🎜name🎜🎜🎜inheritAttrs🎜🎜🎜Anpassungsoptionen für Plugins oder Bibliotheken erforderlich🎜 ul> 🎜Die Lösung besteht darin, zwei verschiedene Skripte in derselben Komponente gemäß der Definition von script setupRFC einzurichten. 🎜rrreee🎜Reaktive Transformationen verwenden🎜🎜Reaktivitätstransformation ist eine experimentelle, aber umstrittene Funktion von Vue 3, die darauf abzielt, die Deklaration von Komponenten zu vereinfachen. Die Idee besteht darin, Transformationen zur Kompilierungszeit zu verwenden, um einen ref automatisch zu entpacken und .value obsolet zu machen. Aber jetzt ist es aufgegeben 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🎜🎜Früher wurden asynchrone Komponenten deklariert, indem Sie sie in eine Funktion einschließen. 🎜rrreee🎜Ab Vue 3 müssen asynchrone Komponenten explizit mithilfe der Hilfsfunktion defineAsyncComponent definiert werden. 🎜rrreee🎜Verwendung redundanter umschlossener Elemente in Vorlagen🎜🎜In Vue 2 erfordern Komponentenvorlagen ein einzelnes Stammelement, was manchmal unnötige umschlossene Elemente einführt. 🎜rrreee🎜Dies ist nicht mehr notwendig, da jetzt mehrere Root-Elemente unterstützt werden. ????🎜rrreee🎜Verwendung des falschen Lebenszyklus🎜🎜Alle Lebenszyklusereignisse der Komponenten wurden umbenannt, indem entweder das Präfix on hinzugefügt oder der Name vollständig geändert wurde. Alle Änderungen können Sie der Tabelle unten entnehmen. 🎜🎜🎜🎜

Das obige ist der detaillierte Inhalt vonWelche Fehler sollten Sie in Vue3 vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!