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 时，始终提供唯一的键来优化渲染。

   
   

     {{ item.name }}
   

   
   

     {{ item.name }}
   

1. 避免内联样式：
   • 更喜欢使用 css 类而不是内联样式，以获得更好的可维护性。

   
   
{{ item.name }}

   

   
   
{{ item.name }}

组件实践

1. 组件可重用性：
   • 设计可通过 props 重用和配置的组件。

   // good
   

   // bad
   {{ buttonlabel }}

1. 道具验证：
   • 始终使用类型和必需的属性来验证 props。

   // 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。

   
   
content

   
   
content

   
   
content

1. 避免使用大模板：
   • 保持模板干净、小；如果它们变得太大，请将它们分解成更小的组件。

状态管理实践

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 应用程序的质量、可维护性和效率。

Kuwebs企业网站管理系统3.1.5 UTF8

酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描

下载