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. 구성요소 재사용성:
   • 소품을 통해 재사용 및 구성이 가능하도록 구성 요소를 디자인합니다.

   // 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 사용:
   • DOM에서 요소를 추가/제거하지 않고 가시성을 전환하려면 v-show를 사용하고 요소를 조건부로 렌더링할 때는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!