Vue2 官方推荐的最佳实践

Vue2官网风格指南

推荐等级

1. 必要的
2. 强烈推荐
3. 推荐
4. 小心使用

必要的

• 自定义的组件名应该始终为多个单词组成，业务组件可以以功能命名，通用组件可以加上通用前缀

  • eg: 业务组件 <CompanyHome> ，通用组件 <TheSearch>

• 组件定义对象中的data项，始终为函数。如果是单例组件则可以为对象（如根组件） *

    data(){
      return {}
    }
  

• 组件定义对象中的props项，定义尽可能详细，最少包括type，推荐设置default *

    props: {
      name: {
        type: Sring,
        default: "fl"
      }
    }
  

• 组件指令v-for必须配合key属性使用

  • eg: <li v-for="item in lists" :key='item.id'>

• 组件指令v-for和v-if不要同时出现在同一个组件上

  • eg: <li v-if="1==1" v-for="item in lists" :key='item.id'> 😡
  • eg: <ul v-if="1==1"> <li v-for="item in lists" :key='item.id'></li> </ul>😗

• 组件中的style标签必须设置scoped

  • eg: <style scoped></style>

• 定义Mixin或plugin时，会涉及到属性会被混入其他组件，对于私有属性，可以通过暴露公共访问方法，或者加上私有前缀来防止命名冲突问题 *

    //暴露公共方法
    const commonMixin = {
      methods: {
        publicMethod(){
          return formatDate()
        }
      }
    }
    function formatDate(){}
    // 设置私有前缀
    const commonMixin = {
      methods: {
        ^_myFormatDate(){}
      }
    }
  

强烈推荐

• 每个组件都是一个单独的文件，方便查找
• 组件名是多个单词拼接，使用大驼峰写法
• 基础组件，如公司内部的组件库，可采用公司名称缩写作为统一前缀
• 单例组件，使用The作为前缀
• 父子组件，父子关系体现在组件名中
• 组件名的单词顺序以功能开头，修饰词结尾
• 自闭合组件，在单文件组件，字符串模板，JSX中，可以自闭合，在DOM模板中必须使用完整标签
• prop名，定义时小驼峰，使用时短横线
• 组件的多个属性建议分行书写，属性值建议带引号
• 模板中的表达式，建议使用计算属性
• 指令采用缩写

推荐

• 组件定义对象中各选项的配置顺序

  1. 副作用： el
  2. 全局感知： name，parent
  3. 组件类型： functional
  4. 模板修改器： delimiters，comments
  5. 模板依赖： components，directive，filters
  6. 组合： extends，mixins
  7. 接口： inheritAttrs，model，props / propsData
  8. 本地状态： data，computed
  9. 事件： watch，lifecycle
  10. methods
  11. 渲染： template / render，renderError

• 组件定义对象的各选项间可以增加空行来提高可阅读性

• 组件内的三大标签顺序要保持一致 如 template，script，style

谨慎使用

• 如果v-if，v-else的标签元素相同，则最好加上key属性
• style中使用了scoped，则书写样式选择器时，不要使用元素选择器，应该使用类选择器
• 父子通信，使用prop和自定义事件，而不要使用$parent
• 全局状态管理，使用全局事件总线，或者Vuex，而不是挂在$root上