Quelles sont les erreurs à éviter dans Vue3

Déclarer des valeurs primitives à l'aide de Reactive

Les déclarations de données étaient autrefois très simples, mais nous disposons désormais de nombreuses fonctions d'assistance. Les règles actuelles sont :

• Utilisez réactif pour déclarer Object, Array, Map, Setreactive声明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

Utilisez ref déclarer String, Number, Boolean

L'utilisation de reactive pour une valeur primitive renverra un avertissement et la valeur ne deviendra pas une donnée réactive. 🎜rrreee🎜Paradoxalement, une autre voie est possible. Par exemple, utiliser ref pour déclarer un Array appellera en interne reactive. 🎜🎜Déconstruction des données réactives🎜🎜Supposons que vous ayez un objet réactif avec une propriété count et un bouton pour incrémenter count. 🎜rrreee🎜La logique ci-dessus est assez simple et fonctionne comme prévu, mais vous pourrez peut-être profiter de la déstructuration de javascript pour effectuer les opérations suivantes : 🎜rrreee🎜Le code est identique, et d'après notre expérience précédente, cela devrait être possible , mais en fait, le suivi réactif de Vue se fait via l'accès aux propriétés. Cela signifie que nous ne pouvons pas attribuer ou déstructurer un objet réactif car la connexion réactive à la première référence a été rompue. C'est l'une des limites de l'utilisation des fonctions d'assistance réactives. 🎜🎜Confus à propos de .value 🎜🎜De même, utiliser ref dans un modèle étrange peut être difficile à s'habituer. 🎜🎜Ref reçoit une valeur et renvoie un objet réactif. La valeur est disponible à l'intérieur de l'objet sous la propriété .value. 🎜rrreee🎜Mais ref sera décompressé lorsqu'il sera utilisé dans des fichiers modèles, et .value n'est pas nécessaire. 🎜rrreee🎜Mais attention ! Le déballage ne fonctionne que dans les propriétés de niveau supérieur. L'extrait de code suivant génère [object Object]. 🎜rrreee🎜Utiliser correctement .value prend du temps. Même si j'oublie parfois comment l'utiliser, je l'utilise de plus en plus souvent. 🎜🎜Événements déclencheurs🎜🎜Depuis la version initiale de Vue, les composants enfants peuvent communiquer avec les composants parents en utilisant emit. Il vous suffit d'ajouter un écouteur d'événement personnalisé pour écouter un événement. 🎜rrreee🎜Maintenant, emit doit être déclaré en utilisant defineEmits. 🎜rrreee🎜Une autre chose à retenir est que ni defineEmits ni defineProps n'ont besoin d'être importés. Ils sont automatiquement disponibles lors de l'utilisation de la configuration du script. 🎜rrreee🎜Enfin, puisque les événements doivent désormais être déclarés, il n'est pas nécessaire d'utiliser le modificateur .native, en fait il a été supprimé. 🎜🎜Déclarez des options supplémentaires🎜🎜La méthode API Options possède plusieurs propriétés qui ne sont pas prises en charge dans la configuration du script. 🎜🎜🎜🎜name🎜🎜🎜inheritAttrs🎜🎜🎜Options de personnalisation requises pour les plugins ou les bibliothèques🎜 ul> 🎜La solution est de mettre en place deux scripts différents dans le même composant selon la définition du script setupRFC. 🎜rrreee🎜Utiliser les transformations réactives🎜🎜Reactivity Transform est une fonctionnalité expérimentale mais controversée de Vue 3 qui vise à simplifier la façon dont les composants sont déclarés. L'idée est d'utiliser des transformations au moment de la compilation pour décompresser automatiquement un ref et rendre .value obsolète. Mais maintenant, il est abandonné et sera supprimé dans Vue 3.3. Il est toujours disponible sous forme de package, mais comme il ne fait pas partie du noyau de Vue, il est préférable de ne pas y investir de temps. 🎜🎜Définir les composants asynchrones🎜🎜Auparavant, les composants asynchrones étaient déclarés en les enveloppant dans une fonction. 🎜rrreee🎜À partir de Vue 3, les composants asynchrones doivent être explicitement définis à l'aide de la fonction d'assistance defineAsyncComponent. 🎜rrreee🎜Utilisation d'éléments encapsulés redondants dans les modèles🎜🎜Dans Vue 2, les modèles de composants nécessitent un seul élément racine, ce qui introduit parfois des éléments encapsulés inutiles. 🎜rrreee🎜Ceci n'est plus nécessaire car plusieurs éléments racine sont désormais pris en charge. ????🎜rrreee🎜Utilisation d'un mauvais cycle de vie🎜🎜Tous les événements du cycle de vie des composants ont été renommés, soit en ajoutant le préfixe on, soit en changeant complètement le nom. Vous pouvez voir tous les changements dans le graphique ci-dessous. 🎜🎜🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!