Vue js 的通用編碼標準。

以下是 Vue.js 的其他好的和壞的做法：

通用編碼標準

1. 避免使用幻數和字串：
   • 重複使用或具有特殊意義的數值使用常數。

   // 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. 高效率使用 v-for：
   • 使用 v-for 時，始終提供唯一的鍵來最佳化渲染。

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

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

1. 避免內嵌樣式：
   • 優先使用 CSS 類別而不是內聯樣式，以獲得更好的可維護性。

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

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

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

組件實踐

1. 組件可重複使用性：
   • 設計可透過 props 重複使用和配置的元件。

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

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

1. 道具驗證：
   • 始終使用類型和必需的屬性來驗證道具。

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

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

1. 避免長方法：
   • 將長方法分解為更小、更易於管理的方法。

   // 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. 避免具有副作用的計算屬性：
   • 計算屬性應該用於純計算而不是副作用。

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

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

模板實踐

1. 使用 v-show 與 v-if：
   • 使用 v-show 來切換可見性，而無需從 DOM 中新增/刪除元素，並在有條件渲染元素時使用 v-if 。

   <!-- 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. 避免使用大模板：
   • 保持模板乾淨、小；如果它們變得太大，請將它們分解成更小的組件。

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

狀態管理實踐

1. 使用 Vuex 進行狀態管理：
   • 使用 Vuex 管理跨多個元件的複雜狀態。

   // 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. 避免組件中的直接狀態突變：
   • 使用突變來修改 Vuex 狀態，而不是直接突變組件中的狀態。

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

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

錯誤處理和調試

1. 全域錯誤處理：
   • 使用 Vue 的全域錯誤處理程序來擷取和處理錯誤。

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

1. 提供使用者回饋：
   • 發生錯誤時提供使用者清晰的回饋。

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

透過遵循這些額外的實踐，您可以進一步提高 Vue.js 應用程式的品質、可維護性和效率。

以上是Vue js 的通用編碼標準。的詳細內容。更多資訊請關注PHP中文網其他相關文章！