风格指南

vue风格指南: 为了回避错误、小纠结和反模式.(理解：一份vue的规范)

vue风格指南官方文档 (opens new window)

规则归类

优先级 A：必要的

为了规避错误，这种代码风格是必须的

优先级 B：强烈推荐

增加项目的可读性和开发体验

优先级 C：推荐

有时可能同时有几种不错的选择。需要注意：前后一致、理由充分

优先级 D：谨慎使用

为了该有潜在风险的代码敲个警钟。

优先级A：

• 组件名为多个单词
  • 避免跟现有的以及未来的 HTML 元素相冲突
• 组件data数据推荐用函数return
  • 当 data 的值是一个对象时，它会在这个组件的所有实例之间共享，
  • 但我们希望的事每个组件实例都管理其自己的数据，所以每个实例必须生成一个独立的数据对象。
• Prop 定义应该尽量详细。
  • 易看懂组件的用法；
  • 在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。
• v-for循环搭配key使用
  • 以便维护内部组件及其子树的状态。
• v-if 和 v-for 永远不同时用在同一个元素上。
  • 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，
  • 这样就导致，哪怕只渲染出小部分用户的元素，也得在每次重新渲染的时候遍历整个列表，不论活跃用户是否发生改变。
• 组件内样式设置作用域（scoped）
  • 除了全剧样式， 其他部分的样式加上scoped属性，还可以使用唯一的class名，这样不会和第三方库的css不会运用到- 自己的html上，或者也可以选择添加一个app专属或者组件专属的前缀。
• 定义私有属性名
  • 使用模块作用域保持不允许外部访问的函数的私有性。eg $yourPluginName

优先级B：

• 能用.vue写的组件，尽量不用vue.component
• 单文件组件的文件名风格统一，单词大写开头 (PascalCase)或横线连接 (kebab-case)。
• 基础组建命名，Base前缀开头（或简单明了的词），显示通用性
• 单个活跃实例的组件，以 The 前缀命名，显示唯一性。
• 密耦合的组件名：父子组件紧密耦合，子组件以父组件名 为前缀命名。
• 组件名中的单词顺序：先动词后形容词 （或先名词后形容词）
• 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的，在 DOM 模板里不是。
• 多数项目中，在单文件组件和字符串模版中组件名是大小写（PascalCase），在DOM模版中是横线连接（kebab-case）
• JS/JSX 中的组件命名应是大小写（PascalCase ）
• 组件命名单词应该是完整的单词
• Props的命名方式: JS里用驼峰命名，html里用短横线
• vue组件有多个属性，分多行来写更加清晰易读
• 模板里复杂逻辑用计算属性或者method
• 复杂的计算属性或者method，拆分成多个
• html模板的属性推荐用双引号的
• 指令缩写要么不写，要么都用缩写(保持一致)

优先级C：

• 组件实例选项的顺序
• 元素特性的顺序
• 组件实例选项，之间添加一个空行
• 单文件组件的顶级元素的组织顺序

优先级D：

• 没有在 v-if/v-else-if/v-else 中使用 key
• scoped 中的元素选择器（优先类选择器，元素选择器慢，影响性能）
• 隐性的父子组件通信（优先使用prop和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop）
• 优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线。