Piawaian Pengekodan Umum untuk Vue js.

Berikut ialah amalan baik dan buruk tambahan untuk Vue.js:

Piawaian Pengekodan Am

1. Elakkan Nombor Ajaib dan Rentetan:
   • Gunakan pemalar untuk nilai yang digunakan berulang kali atau mempunyai makna istimewa.

   // 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. Gunakan v-for dengan Cekap:
   • Apabila menggunakan v-for, sentiasa sediakan kunci unik untuk mengoptimumkan pemaparan.

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

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

1. Elakkan Gaya Sebaris:
   • Lebih suka menggunakan kelas CSS berbanding gaya sebaris untuk kebolehselenggaraan yang lebih baik.

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

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

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

Amalan Komponen

1. Kebolehgunaan Semula Komponen:
   • Komponen reka bentuk boleh diguna semula dan boleh dikonfigurasikan melalui prop.

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

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

1. Pengesahan Prop:
   • Sentiasa sahkan prop menggunakan jenis dan atribut yang diperlukan.

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

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

1. Elakkan Kaedah Panjang:
   • Pecahkan kaedah yang panjang kepada kaedah yang lebih kecil dan lebih mudah diurus.

   // 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. Elakkan Sifat Dikira dengan Kesan Sampingan:
   • Sifat yang dikira harus digunakan untuk pengiraan tulen dan bukan untuk kesan sampingan.

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

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

Amalan Templat

1. Gunakan v-show vs v-if:
   • Gunakan v-show untuk menogol keterlihatan tanpa menambah/mengalih keluar elemen daripada DOM dan v-if apabila memaparkan elemen secara bersyarat.

   <!-- 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. Elakkan Templat Besar:
   • Pastikan templat bersih dan kecil; pecahkannya kepada komponen yang lebih kecil jika ia menjadi terlalu besar.

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

Amalan Pengurusan Negeri

1. Gunakan Vuex untuk Pengurusan Negeri:
   • Gunakan Vuex untuk menguruskan keadaan kompleks merentas berbilang komponen.

   // 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. Elakkan Mutasi Keadaan Langsung dalam Komponen:
   • Gunakan mutasi untuk mengubah suai keadaan Vuex dan bukannya mengubah keadaan secara langsung dalam komponen.

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

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

Ralat Pengendalian dan Penyahpepijatan

1. Pengendalian Ralat Global:
   • Gunakan pengendali ralat global Vue untuk menangkap dan mengendalikan ralat.

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

1. Berikan Maklum Balas Pengguna:
   • Berikan maklum balas yang jelas kepada pengguna apabila ralat berlaku.

   // 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);
       }
     }
   }

Dengan mematuhi amalan tambahan ini, anda boleh meningkatkan lagi kualiti, kebolehselenggaraan dan kecekapan aplikasi Vue.js anda.

Atas ialah kandungan terperinci Piawaian Pengekodan Umum untuk Vue js.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!