Normes générales de codage pour Vue js.

Voici d'autres bonnes et mauvaises pratiques pour Vue.js :

Normes générales de codage

1. Évitez les nombres et les chaînes magiques :
   • Utilisez des constantes pour les valeurs qui sont utilisées à plusieurs reprises ou qui ont une signification particulière.

   // Good
   const MAX_ITEMS = 10;

   function addItem(item) {
     if (items.length < MAX_ITEMS) {
       items.push(item);
     }
   }

   // Bad
   function addItem(item) {
     if (items.length < 10) {
       items.push(item);
     }
   }

1. Utilisez v-for efficacement :
   • Lorsque vous utilisez v-for, fournissez toujours une clé unique pour optimiser le rendu.

   <!-- Good -->
   <div v-for="item in items" :key="item.id">
     {{ item.name }}
   </div>

   <!-- Bad -->
   <div v-for="item in items">
     {{ item.name }}
   </div>

1. Évitez les styles en ligne :
   • Préférez utiliser les classes CSS plutôt que les styles en ligne pour une meilleure maintenabilité.

   <!-- Good -->
   <div class="item">{{ item.name }}</div>

   <style scoped>
   .item {
     color: red;
   }
   </style>

   <!-- Bad -->
   <div :style="{ color: 'red' }">{{ item.name }}</div>

Pratiques des composants

1. Réutilisabilité des composants :
   • Concevez des composants réutilisables et configurables via des accessoires.

   // Good
   <BaseButton :label="buttonLabel" :disabled="isDisabled" @click="handleClick" />

   // Bad
   <button :disabled="isDisabled" @click="handleClick">{{ buttonLabel }}</button>

1. Validation des accessoires :
   • Validez toujours les accessoires en utilisant le type et les attributs requis.

   // Good
   props: {
     title: {
       type: String,
       required: true
     },
     age: {
       type: Number,
       default: 0
     }
   }

   // Bad
   props: {
     title: String,
     age: Number
   }

1. Évitez les méthodes longues :
   • Décomposez les méthodes longues en méthodes plus petites et plus gérables.

   // Good
   methods: {
     fetchData() {
       this.fetchUserData();
       this.fetchPostsData();
     },
     async fetchUserData() { ... },
     async fetchPostsData() { ... }
   }

   // Bad
   methods: {
     async fetchData() {
       const userResponse = await fetch('api/user');
       this.user = await userResponse.json();
       const postsResponse = await fetch('api/posts');
       this.posts = await postsResponse.json();
     }
   }

1. Évitez les propriétés calculées avec des effets secondaires :
   • Les propriétés calculées doivent être utilisées pour des calculs purs et non pour des effets secondaires.

   // Good
   computed: {
     fullName() {
       return `${this.firstName} ${this.lastName}`;
     }
   }

   // Bad
   computed: {
     fetchData() {
       // Side effect: fetch data inside a computed property
       this.fetchUserData();
       return this.user;
     }
   }

Pratiques des modèles

1. Utilisez v-show contre v-if :
   • Utilisez v-show pour basculer la visibilité sans ajouter/supprimer des éléments du DOM, et v-if lors du rendu conditionnel des éléments.

   <!-- Good: Use v-show for toggling visibility -->
   <div v-show="isVisible">Content</div>

   <!-- Good: Use v-if for conditional rendering -->
   <div v-if="isLoaded">Content</div>

   <!-- Bad: Use v-if for simple visibility toggling -->
   <div v-if="isVisible">Content</div>

1. Évitez les modèles volumineux :
   • Gardez les modèles propres et petits ; divisez-les en composants plus petits s’ils deviennent trop gros.

   <!-- Good: Small, focused template -->
   <template>
     <div>
       <BaseHeader />
       <BaseContent />
       <BaseFooter />
     </div>
   </template>

   <!-- Bad: Large, monolithic template -->
   <template>
     <div>
       <header>...</header>
       <main>...</main>
       <footer>...</footer>
     </div>
   </template>

Pratiques de gestion de l'État

1. Utilisez Vuex pour la gestion de l'état :
   • Utilisez Vuex pour gérer des états complexes sur plusieurs composants.

   // Good
   // store.js
   export default new Vuex.Store({
     state: { user: {} },
     mutations: {
       setUser(state, user) {
         state.user = user;
       }
     },
     actions: {
       async fetchUser({ commit }) {
         const user = await fetchUserData();
         commit('setUser', user);
       }
     }
   });

1. Éviter la mutation d'état directe dans les composants :
   • Utilisez des mutations pour modifier l'état de Vuex plutôt que de muter directement l'état des composants.

   // Good
   methods: {
     updateUser() {
       this.$store.commit('setUser', newUser);
     }
   }

   // Bad
   methods: {
     updateUser() {
       this.$store.state.user = newUser; // Direct mutation
     }
   }

Gestion des erreurs et débogage

1. Gestion globale des erreurs :
   • Utilisez le gestionnaire d'erreurs global de Vue pour détecter et gérer les erreurs.

   Vue.config.errorHandler = function (err, vm, info) {
     console.error('Vue error:', err);
   };

1. Fournir les commentaires des utilisateurs :
   • Fournissez des commentaires clairs aux utilisateurs lorsqu'une erreur se produit.

   // Good
   methods: {
     async fetchData() {
       try {
         const data = await fetchData();
         this.data = data;
       } catch (error) {
         this.errorMessage = 'Failed to load data. Please try again.';
       }
     }
   }

   // Bad
   methods: {
     async fetchData() {
       try {
         this.data = await fetchData();
       } catch (error) {
         console.error('Error fetching data:', error);
       }
     }
   }

En adhérant à ces pratiques supplémentaires, vous pouvez améliorer encore la qualité, la maintenabilité et l'efficacité de vos applications Vue.js.

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!