Hé! Je suis Hossein Mousavi , ingénieur Front End chez Alibaba Travels , et dans cette histoire moyenne, nous allons refactoriser un composant Vue étape par étape et l'améliorer. Alors allons-nous commencer ? !

Qu'est-ce que la configuration des scripts ?

<script setup>est un sucre syntaxique au moment de la compilation pour utiliser l'API de composition dans les composants à fichier unique ( SFC ). Il s'agit de la syntaxe recommandée pour utiliser à la fois les SFC et l'API de composition. Tout ce que vous avez à faire est d'ajouter setupcomme attribut de script. Pour éviter toute confusion, il n'est disponible que pour les composants SFC et vous ne pouvez pas l'utiliser avec l' attribut pour les fichiers .js ou .tssrc externes . Il fournit une base de code allégée et de meilleures performances d'exécution. Nous discuterons de ses avantages dans un second temps mais d'abord, plongeons dans sa mise en œuvre. Nous récupérons un composant simple avec l' option API , puis le refactorisons dans un composant de script de configuration avec des API de composition. Passons aux choses sérieuses alors !

Mise en œuvre

Examinons d'abord un composant Vue standard avec l'API Option. Vous pouvez facilement trouver ces types de composants dans les applications Vue 2.

<template>
  <input v-model="name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1> {{ computedVariable }} </h1>
</template>

<script>
export default {
  data() {
    return {
      name: "Hossein",
      age: 26,
    };
  },

  computed: {
    computedVariable() {
      return `My name is ${this.name} and I'm ${this.age} years old`;
    },
  },

  methods: {
    incrementAge() {
      this.age += 1;
    },
  },
};
</script>

Il s'agit d'un composant simple axé sur les concepts de liaison de données bidirectionnelle et nous souhaitons refactoriser ce composant en plusieurs étapes.

Étape 1 de la refactorisation : utilisation de l'API de composition

Pour utiliser l'API de composition, nous devons utiliser un crochet spécial appelé : la fonction de configuration . Mais nous devons gérer certaines choses pour que notre composant fonctionne correctement.

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1>{{ computedVariable }}</h1>
</template>

<script>
import { computed, reactive } from "vue";
export default {
  setup() {
    const user = reactive({ name: "Hossein", age: 26 });

    function incrementAge() {
      user.age++;
    }

    const computedVariable = computed(
      () => `My name is ${user.name} and I'm ${user.age} years old`
    );

    return {
      computedVariable,
      incrementAge,
      user
    };
  },
};
</script>

• Nous avons importé computedet reactivede vue. J'écris une autre histoire de Medium pour couvrir en profondeur la réactivité de Vue 3.
• Comme vous pouvez le voir, nous avons une setupfonction dans laquelle toutes nos variables et fonctions y ont été stockées. Si vous souhaitez utiliser vos variables ou fonctions dans votre modèle, vous devez les exposer en les renvoyant à la fin de la fonction.
• Comme computedVariablevous pouvez le voir, l'utilisation de Vue est calculée comme une fonction fléchée.
• La raison pour laquelle toutes les variables reactiveet computedutilisent constet non letest qu'elles contiennent un getter et un setter et qu'elles utilisent le proxy de JavaScript pour modifier les données dans leur référence. Nous n'avons donc pas besoin de les réinstancier.

Étape 2 de la refactorisation : utilisation de defineComponent

Je pense personnellement que vous devriez toujours utiliser TypeScript pour tous vos projets, surtout si vous n'êtes pas le seul mainteneur/développeur du projet. En utilisant TypeScript, votre code deviendrait prévisible pour les machines et les humains et je suis fortement pratiquant l'écriture de code prévisible dans mon projet. defineComponent est un assistant de type pour définir un composant Vue avec inférence de type. Regardons ça:

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()"> Increment Age </button>
  <h1>{{ computedVariable }}</h1>
</template>

<script lang="ts">
import { 
   defineComponent,
   computed,
   reactive,
   type Computed,
   type Reactive } from "vue";

interface User {
  name: string;
  age: number;
}

interface ComponentOutput {
  computedVariable: Computed<string>;
  incrementAge: () => void;
  user: Reactive<User>;
}

export default defineComponent({
  setup(): ComponentOutput {
    const user = reactive<User>({ name: "Hossein", age: 26 });

    function incrementAge(): void {
      user.age++;
    }

    const computedVariable = computed<string>(
      () => `My name is ${user.name} and I'm ${user.age} years old`
    );

    return {
      computedVariable,
      incrementAge,
      user
    };
  },
});
</script>

• Tout d'abord, nous devons déclarer explicitement que le langage que nous voulons utiliser est TypeScript en ajoutant un attribut appelé langet défini tscomme sa valeur.
• Ensuite, comme vous le voyez, defineComponentest une fonction qui prend la fonction setup comme argument. Si notre composant a besoin d'accessoires, d'émission ou de quelques autres options, nous pouvons également les transmettre en tant qu'argument. Nous examinerons un composant plus compliqué plus tard.
• Nous avons créé deux interfaces pour l'utilisateur et le résultat du composant. Bien que l'écriture du type de retour pour la fonction de configuration ne soit pas si courante, je l'ai écrit à des fins éducatives .
• Nous avons importé deux types de vue. Les deux commencent par une majuscule : Computedet Reactive. Ces deux types ont un générique comme vous pouvez le voir. Nous devons déclarer explicitement leur type générique.

Étape 3 de la refactorisation : utilisation de la configuration du script

Il est maintenant temps pour nous d'utiliser le setupscript. Examinons d'abord le code ci-dessous, puis nous l'analyserons.

<template>
  <input v-model="user.name" />
  <button @click="incrementAge()">Increment Age</button>
  <h1>{{ computedVariable }}</h1>
</template>

<script setup lang="ts">
import { computed, reactive, Computed, Reactive } from "vue";

interface User {
  name: string;
  age: number;
}

const user = reactive<User>({ name: "Hossein", age: 26 });

function incrementAge(): void {
  user.age++;
}

const computedVariable = computed<string>(
  () => `My name is ${user.name} and I'm ${user.age} years old`
);
</script>

• Une fois que vous l'avez écrit, il n'est pas nécessaire d'utiliser l'une ou l'autre setup()méthode ou defineComponentdans votre code. Le Vue les gère tous les deux pour nous.
• Veuillez noter qu'il n'est pas nécessaire de renvoyer les valeurs ou les fonctions que vous souhaitez utiliser dans votre modèle. Chaque fonction et variable utilisée dans votre modèle reviendra automatiquement de votre section de script.

J'utilise régulièrement la configuration du script . Je l'ai trouvé extrêmement utile et facile à lire et cela conduit à un code beaucoup plus léger.

Partage avec tes amis! Applaudissez jusqu'à 50 fois maximum.

N'hésitez pas à me faire part de vos réflexions et idées. Vous pouvez me joindre sur Twitter ou trouver un autre moyen en visitant mon portfolio .

En savoir plus sur moi :