Vue 编码规范

仅记录个人认为日常需要注意的规范，详情可以去vue官网里看哦，非常详细。

优先级 A 的规则：必要的 (规避错误)

• 组件名为多个单词：避免跟现有的以及未来的 HTML 元素相冲突。
• 组件的 data 必须是一个函数（除了 new Vue 外的任何地方）：它的值必须是返回一个对象的函数。
  • 在一个 Vue 的根实例上直接使用对象是可以的，因为只存在一个这样的实例。
• Prop 定义应该尽量详细：
  
• 总是用 key 配合 v-for：以便维护内部组件及其子树的状态。
• 永远不要把 v-if 和 v-for 同时用在同一个元素上，以下两种情形：
  • 过滤列表项目：可以先把列表放在计算属性（computed）中过滤，返回过滤后的列表。
  • 渲染要隐藏的列表，将 v-if 用在容器元素上（例如ul、ol）。
    v-for 比 v-if 具有更高的优先级。
• 为组件的样式设置作用域：scoped，不过更倾向于基于唯一的class名的策略。
• 私有属性名
  • 使用 $_ 前缀来定义其自身的私有属性，确保不会和 Vue 自身相冲突。
    

优先级 B 的规则：强烈推荐 (增强可读性)

• 只要有能够拼接文件的构建系统，就把每个组件单独分成文件。
• 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
• 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
• 只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性：每个页面只使用一次，永远不接受任何 prop。
• 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
• 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
• 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做：自闭合是刻意没有内容。
• 组件名应该倾向于完整单词而不是缩写。
• 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
• 多个特性的元素应该分多行撰写，每个特性一行。
• 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
• 应该把复杂计算属性分割为尽可能多的更简单的属性。
• 非空 HTML 属性值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。
• 指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

优先级 C 的规则：推荐 (将选择和认知成本最小化)

• 组件/实例的选项应该有统一的顺序。
  • 副作用 (触发组件外的影响)：el
  • 全局感知 (要求组件以外的知识)：name、parent
  • 组件类型 (更改组件的类型)：functional
  • 模板修改器 (改变模板的编译方式)：delimiters、comments
  • 模板依赖 (模板内使用的资源)：components、directives、filters
  • 组合 (向选项里合并属性)：extends、mixins
  • 接口 (组件的接口)：inheritAttrs、model、props/propsData
  • 本地状态 (本地的响应式属性)：data、computed
  • 事件 (通过响应式事件触发的回调)：watch
    • 生命周期钩子 (按照它们被调用的顺序)：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed
  • 非响应式的属性 (不依赖响应系统的实例属性)：methods
  • 渲染 (组件输出的声明式描述)：template/render、renderError
• 元素 (包括组件) 的特性应该有统一的顺序。
  • 定义 (提供组件的选项)：is
  • 列表渲染 (创建多个变化的相同元素)：v-for
  • 条件渲染 (元素是否渲染/显示)：v-if、v-else-if、v-else、v-show、v-cloak
  • 渲染方式 (改变元素的渲染方式)：v-pre、v-once
  • 全局感知 (需要超越组件的知识)：id
  • 唯一的特性 (需要唯一值的特性)：ref、key、slot
  • 双向绑定 (把绑定和事件结合起来)：v-model
  • 其它特性 (所有普通的绑定或未绑定的特性)
  • 事件 (组件事件监听器)：v-on
  • 内容 (覆写元素的内容)：v-html、v-text
• 在多个属性之间增加一个空行，特别是在这些选项一屏放不下，需要滚动才能都看到的时候。
• 单文件组件应该总是让

优先级 D 的规则：谨慎使用 (有潜在危险的模式)

• 如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个
  元素)。
  
• 元素选择器应该避免在 scoped 中出现。
• 优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop。
• 应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线。