总结vue2 风格指南和vue3 Style Guide

camelCase:驼峰命名; PascalCase:首字母全大写; kebab-case:全小写用横线连接.

必要规则

  • 组件名为多个单词: 组件名应该始终是多个单词的，根组件 App 以及 <transition>、<component> 之类的 Vue 内置组件除外
    • 可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。
  • 组件数据: 组件的 _data 必须是一个函数_。(vue3 无此条)
  • Prop 定义应该尽量详细。_至少需要指定其类型_。
  • 为 v-for 设置键值: 在组件上_总是必须用 key 配合 v-for_，以便维护内部组件及其子树的状态。
  • 避免 v-if 和 v-for 用在一起: _永远不要把 v-if 和 v-for 同时用在同一个元素上。_如果两者同时存在于一个节点上时:
    • vue2 中，v-for 的优先级高于 v-if。_v-if 会在每一个 v-for 循环渲染出来的项上作用，造成性能上的浪费_。
    • vue3 中，v-if 比 v-for 的优先级更高。这意味着 _v-if 的条件将无法访问到 v-for 作用域内定义的变量别名_。
  • 为组件样式设置作用域必要: 对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。
    • 这条规则_只和单文件组件_有关。不一定要使用 scoped attribute。设置作用域也可以通过 CSS Modules(组件库开发更倾向)。
    • 私有 property 名: 始终_使用__$___前缀_来表示插件、混合组件等中的_自定义私有属性_，这些属性不应该被视为公共 API。

强烈推荐(增强可读性)

  • 组件文件: 只要有能够拼接文件的构建系统，就把每个组件单独分成文件。
  • 单文件组件文件名的大小写: 单文件组件的文件名应该要么始终是_单词大写开头_ (PascalCase)，要么始终是_横线连接_ (kebab-case)。
  • 基础组件名: 应用_特定样式和约定的基础组件_(展示类的、无逻辑的或无状态的组件)_全部以一个特定的前缀开头_，比如 Base、App 或 V。
  • 单例组件名:只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性
    • 不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件_永远不接受任何 prop_，因为它们是为你的应用定制的
    • 如果发现_有必要添加 prop_，那就表明这实际上是_一个可复用的组件_，_只是目前_在每个页面里只使用一次。
  • 紧密耦合的组件名: 和父组件紧密耦合的_子组件应该以父组件名作为前缀命名_。
  • 组件名中的单词顺序: 组件名应该以_高级别的_(通常是一般化描述的)_单词开头_，_以描述性的修饰词结尾_。
    • 名词-形容词-副词-动词……这样，文件排序更好看。
    • 例如，SearchButtonRun.vue，SettingsCheckboxLaunchOnStartup.vue
  • 自闭合组件: 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
    • 在单文件组件、字符串模板和JSX中<MyComponent/>;在DOM模板中:<my-component></my-component>
  • 模板中的组件名大小写: 在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
    • PascalCase 相比 kebab-case 有一些优势：
      • _编辑器可以在模板里自动补全组件名_，因为 PascalCase 同样适用于 JavaScript。
      • <MyComponent> 视觉上比 <my-component> 更能够_和单个单词的 HTML 元素区别开来。_
      • 如果在模板中使用任何非 Vue 的自定义元素，PascalCase 确保了 Vue 组件在视觉上仍然是易识别的。
    • 不幸的是，由于 HTML 是大小写不敏感的，在 DOM 模板中必须仍使用 kebab-case。
    • 在所有的地方都使用 kebab-case 同样是可以接受的。
  • JS/JSX 中的组件名大小写: JS/JSX 中的组件名应该始终是 PascalCase 的。
  • 完整单词的组件名: 组件名应该倾向于完整单词而不是缩写。
  • Prop 名大小写: 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
  • 多个 attribute 的元素: 多个 attribute 的元素应该分多行撰写，每个 attribute 一行
  • 模板中简单的表达式: 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
  • 简单的计算属性: 应该把复杂计算属性分割为尽可能多的更简单的 property。更简单的计算属性:易于测试、易于阅读、更好的“拥抱变化”
  • 带引号的 attribute 值: 非空 HTML attribute 值应该始终带引号(单引号或双引号，以 JS 中未使用的为准)。
  • 指令缩写: 指令缩写(用:表示v-bind:、用@表示v-on:和用#表示v-slot:)应该要么都用要么都不用。

推荐(将选择和认知成本最小化)

  • 组件/实例的选项的顺序:(编写一个组件从上往下)，也能知道从插件里添加的新 property 应该放到哪里。
    • vue2: 1 副作用 (触发组件外的影响); 2 全局感知 (要求组件以外的知识); 3 组件类型 (更改组件的类型);4 模板修改器 (改变模板的编译方式); 5 模板依赖 (模板内使用的资源); 6 组合 (向选项里合并 property); 7 接口 (组件的接口); 8 本地状态 (本地的响应式 property); 9 事件 (通过响应式事件触发的回调); 10 非响应式的 property (不依赖响应系统的实例 property); 11 渲染 (组件输出的声明式描述)。
    • el; name、parent; functional; delimiters、comments;components、directives、filters; extends、mixins; inheritAttrs、model、props/propsData; data、computed; watch、Lifecycle Events; methods; template/render、renderError。
    • vue3: name; compilerOptions; components、directives; extends、mixins、provide/inject; inheritAttrs、props、emits; setup; data、computed; watch、Lifecycle Events; methods;template/render。
  • 元素 (包括组件) 的 attribute 应该有统一的顺序。
    • 定义 (提供组件的选项) 列表渲染 (创建多个变化的相同元素) 条件渲染 (元素是否渲染/显示) 渲染方式 (改变元素的渲染方式) 全局感知 (需要超越组件的知识) 唯一的 attribute (需要唯一值的 attribute) 双向绑定 (把绑定和事件结合起来) 其它 attribute (所有普通的绑定或未绑定的 attribute) 事件 (组件事件监听器) 内容 (覆写元素的内容)
    • is、v-for、v-if、v-else-if、v-else、v-show、v-cloak、v-pre、v-once、id、ref、key、v-model、v-on、v-html、v-text
  • 在多个 property 之间添加空行可以让其变得容易阅读。
  • 单文件组件应该总是让<script>、<template>和<style>标签的顺序保持一致。<style>要放在最后，因为另外两个至少要有一个。

谨慎使用(有潜在危险的模式)

  • 没有在 v-if/v-else-if/v-else 中使用 key。(v3 版没说)
  • 元素选择器应该避免在 scoped 中出现。在 scoped 样式中，类选择器比元素选择器更好，因为_大量使用元素选择器是很慢的_。
  • 应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或变更 prop。
  • 应该优先通过 Vuex 管理全局状态，而不是通过this.$root 或一个全局事件总线。(v3 版没说)