Vue js 通用编码标准

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

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

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

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

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

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

   // good
   <basebutton :label="buttonlabel" :disabled="isdisabled" @click="handleclick" />

   // bad
   <button :disabled="isdisabled" @click="handleclick">{{ buttonlabel }}</button>

   // good
   props: {
     title: {
       type: string,
       required: true
     },
     age: {
       type: number,
       default: 0
     }
   }

   // bad
   props: {
     title: string,
     age: number
   }

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

   // good
   computed: {
     fullname() {
       return `${this.firstname} ${this.lastname}`;
     }
   }

   // bad
   computed: {
     fetchdata() {
       // side effect: fetch data inside a computed property
       this.fetchuserdata();
       return this.user;
     }
   }

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

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

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

   // good
   methods: {
     updateuser() {
       this.$store.commit('setuser', newuser);
     }
   }

   // bad
   methods: {
     updateuser() {
       this.$store.state.user = newuser; // direct mutation
     }
   }

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

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