Conseils de développement Vue3+TS+Vite : Comment utiliser l'API de composition Vue3 avec élégance

Compétences en développement Vue3+TS+Vite : Comment utiliser l'API de composition Vue3 avec élégance

Introduction :
Le lancement de Vue3 a apporté une série de changements au développement front-end, l'un des changements les plus importants est l'introduction de Composition API (API composable). Par rapport à l'API Options traditionnelle, l'API Composition nous permet d'organiser et de gérer notre code de manière plus flexible et efficace. Cet article expliquera comment utiliser l'API de composition Vue3 avec élégance et combiner TypeScript et Vite pour le développement de projets.

1. Installez et initialisez le projet
Tout d'abord, nous devons installer la dernière version de Vue CLI, installez-la via la commande suivante :

npm install -g @vue/cli

Ensuite, nous pouvons utiliser Vue CLI pour créer un nouveau projet :

vue create my-project

Quand En créant le projet, nous pouvons choisir TypeScript comme modèle du projet. S'il n'y a pas de choix, nous pouvons également ajouter le support TypeScript manuellement :

vue add @vue/typescript

Ensuite, nous pouvons utiliser Vite comme outil de construction du projet et l'installer via la commande suivante :

npm init vite@latest my-vite-project -- --template vue-ts

De cette façon, nous avons installé et initialisé avec succès un Le projet Vue3+TS +Vite.

2. Utiliser l'API Composition
L'utilisation de l'API Composition peut mieux organiser notre code et améliorer l'efficacité de notre développement. Voici un exemple simple illustrant comment utiliser l'API Composition.

1. Créer un nouveau composant
   Tout d'abord, nous pouvons créer un nouveau composant, tel que HelloWorld.vue :

   <template>
     <div>{{ message }}</div>
   </template>
   
   <script>
   import { ref, onMounted } from 'vue';
   
   export default {
     setup() {
    const message = ref('Hello, World!');
   
    onMounted(() => {
      setTimeout(() => {
        message.value = 'Hello, Vue3!';
      }, 2000);
    });
   
    return {
      message,
    };
     },
   };
   </script>

Dans cet exemple, nous utilisons la fonction ref dans l'API Composition pour définir un message de données réactif, et la valeur du message est modifiée dans la fonction hook montée du composant.

2. Utilisation des composants
   Ensuite, utilisez ce composant dans notre page :

   <template>
     <div>
    <HelloWorld />
     </div>
   </template>
   
   <script>
   import HelloWorld from './HelloWorld.vue';
   
   export default {
     components: {
    HelloWorld,
     },
   };
   </script>

Introduit le composant HelloWorld dans la page et utilisez-le comme composant enfant.

3. Exécuter le projet
   Enfin, nous pouvons exécuter le projet et voir l'effet :

   npm run dev

Grâce à cet exemple simple, nous pouvons voir que l'utilisation de l'API Composition peut organiser notre code de manière plus concise et claire.

3. Fonctions de l'API de composition couramment utilisées
En plus des fonctions ref et onMounted présentées ci-dessus, il existe également des fonctions de l'API de composition couramment utilisées qui peuvent nous aider à mieux développer.

1. Fonction réactive
   La fonction réactive peut convertir un objet normal en un objet réactif et renvoyer un objet proxy réactif. L'exemple est le suivant :

   import { reactive } from 'vue';
   
   const state = reactive({
     count: 0,
   });
   
   console.log(state.count); // 输出：0
   
   state.count++;
   console.log(state.count); // 输出：1

Dans l'exemple ci-dessus, nous utilisons la fonction réactive pour convertir un état d'objet normal en un objet réactif, puis y accéder et le modifier via state.count.

2. Fonction de montre
   La fonction de montre peut surveiller les changements dans les données réactives et exécuter la fonction de rappel correspondante lorsque les données changent. Un exemple est le suivant :

   import { ref, watch } from 'vue';
   
   const count = ref(0);
   
   watch(count, (newValue, oldValue) => {
     console.log(`count从${oldValue}变为${newValue}`);
   });
   
   count.value++; // 输出：count从0变为1

Dans l'exemple ci-dessus, nous utilisons la fonction watch pour surveiller les changements dans la variable count et générer le journal correspondant lorsque le nombre change.

3. Fonction toRefs
   La fonction toRefs peut convertir les propriétés d'un objet réactif en un objet de référence normal et renvoyer un nouvel objet. Un exemple est le suivant :

   import { reactive, toRefs } from 'vue';
   
   const state = reactive({
     count: 0,
   });
   
   const { count } = toRefs(state);
   
   console.log(count.value); // 输出：0
   
   count.value++;
   console.log(count.value); // 输出：1

Dans l'exemple ci-dessus, nous utilisons la fonction toRefs pour convertir l'attribut count dans state en un objet ref normal, afin que nous puissions y accéder et le modifier via count.value.

4. Résumé
L'introduction de l'API de composition Vue3 rend notre code plus flexible et efficace, et permet de mieux organiser et gérer notre code. Cet article explique comment utiliser l'API de composition Vue3 et développer des projets Vue3 avec TypeScript et Vite. En comprenant et maîtrisant l'utilisation de l'API Composition, nous pouvons développer des projets Vue3 avec plus d'élégance et améliorer notre efficacité de développement.

J'espère que cet article pourra vous fournir de l'aide et des conseils pour utiliser l'API Composition dans le développement de projets Vue3. Bonne programmation !

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!