305-vue-patterns

Vue开发规范

本指南概述了使用Vue技术栈进行开发的最佳实践、约定和标准。

开发理念

• 编写干净、可维护和可扩展的代码
• 遵循组件化开发原则
• 函数式和声明式编程模式优于命令式
• 数据驱动视图
• 实践组件驱动开发

代码实现指南

规划阶段

• 从逐步规划开始
• 实现前编写详细的伪代码
• 记录组件架构和数据流
• 考虑边缘情况和错误场景

代码风格

• 缩进使用2个空格（一个tab）
• 使用双引号(" ")表示字符串，而不是单引号(' ')
• 在HTML分块注释：在每一个组件模块，加上一对HTML注释
• 消除未使用的变量
• 在关键词后添加空格
• 在函数声明括号前添加空格
• 始终使用严格相等(===)而非宽松相等(==)
• 中缀运算符两侧加空格
• 逗号后添加空格
• 多行if语句使用花括号
• 回调中始终处理错误参数

命名约定

一般规则

• 使用PascalCase（帕斯卡命名法）命名：
  • 组件
  • 类
• 使用kebab-case（短横线命名法）命名：
  • 目录名
  • 文件名（例如：user-profile.vue）
• 使用camelCase（驼峰命名法）命名：
  • 变量
  • 函数
  • 方法
  • 钩子
  • 属性
  • Props
• 使用UPPERCASE（大写）命名：
  • 环境变量
  • 常量
  • 全局配置

特定命名模式

• 组件名应该始终是多个单词组成（大于等于2），避免与HTML元素相冲突
• 布尔变量前缀使用动词：isLoading, hasError, canSubmit
• 使用完整词汇而非缩写
• 数组命名：名词+List, 名词+s, 如：userList
• 常量使用全大写下划线分隔命名，力求语义表达完整清楚：const API_ENDPOINT = "https://a"

Vue最佳实践

组件架构

• 组件名使用大驼峰命名，且name字段应与文件名保持一致
• 组件文件名为小写字母加中划线格式: my-component.vue
• 组件的data必须是一个函数

Prop定义

• 避免直接修改props，应通过data创建本地副本再修改
• 必须使用camelCase驼峰命名
• 必须指定类型
• 必须加上注释，表明其含义
• 必须加上required或者default，二者选其一

props: {
  // 用户级别，用于显示皇冠个数
  userLevel：{
    type: String,
    required: true
  }
}

生命周期函数

• 按顺序排列生命周期函数：created -> mounted -> updated -> destroyed

样式规范

• 使用作用域样式 <style scoped>，避免全局样式污染
• 应用scss语法，嵌套结构不超过3层

模板规范

• 避免使用内联样式、内联事件，模板应简洁明了
• v-for必须绑定key，不涉及删除添加的list可以使用:key="index" ❤️
• 如果组件特性元素较多，应该主动换行

<MyComponent 
  foo="a" 
  bar="b" 
  baz="c"
  foo="a" 
  bar="b" 
  baz="c"
/>
 
<!-- 反例 -->
<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" baz="c"/>

v-show与v-if选择

• 如果运行时需要非常频繁地切换，使用v-show
• 如果在运行时，条件很少改变，使用v-if

script标签内部结构顺序

• components > props > data > computed > watch > filter > 钩子函数（钩子函数按其执行顺序） > methods

router中的命名规范

• name命名规范采用KebabCase命名规范且和component组件名保持一致（因为要保持keep-alive特性，keep-alive按照component的name进行缓存，所以两者必须高度保持一致）
• path、childrenPoints命名规范采用kebab-case命名规范（尽量vue文件的目录结构保持一致，方便找到对应文件）

{
  path: '/file',
  name: 'File',
  component: Main,
  meta: {
    title: '文件服务',
    icon: 'ios-cloud-upload'
  },
  children: [
    {
      path: '/file/file-list',
      name: 'FileList',
      component: () => import('@/views/file/file-list.vue')
    },
  ]
}