Vue——风格指南

　　了解Vue风格指南，有利于规范编码，现将一些规则记录如下：

　　（1）组件

• 组件名应该始终是多个单词的，根组件 App 以及 <transition>、<component> 之类的 Vue 内置组件除外。这样可以避免与HTML元素名冲突，因为所有的 HTML 元素名称都是单个单词的。
• 单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。
• 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
• 单例组件名：在每个页面中只是使用一次的组件应该以 The 前缀命名，以示其唯一性。这类组件永远不会接受任何prop。
• 和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
• 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
• 对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的（由于 HTML 是大小写不敏感的）。
• 组件名应该倾向于完整单词而不是缩写。
• 单文件组件应该总是让 <script>、<template> 和 <style> 标签的顺序保持一致。且 <style> 要放在最后，因为另外两个标签至少要有一个。

　　（2）data　　

• 组件的 data 必须是一个返回对象的函数。因为若data 的值是一个对象时，那么它会在这个组件的所有实例之间共享；而若是一个返回对象的函数的话，那么每个组件实例都管理其自己的数据，互不影响。不过在一个 Vue 的根实例上直接使用对象是可以的， 因为只存在一个这样的实例。
• Vue 使用 _ 前缀来定义其自身的私有属性，而将$_作为一个用户定义的私有属性的约定，以确保不会和 Vue 自身相冲突。为了确保私有数据，最好采用函数的方式进行访问。

　　（3）Prop　　

• Prop 定义应该尽量详细，至少需要指定其类型。这样做的好处是它们写明了组件的 API，所以很容易看懂组件的用法；另外是在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。
• 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX中应该始终使用 kebab-case。
• 应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop。

　　（4）属性

• 应该把复杂计算属性分割为尽可能多的更简单的属性。

　　（5）指令

• 为v-for设置唯一的key键值，也就是说在组件上总是必须用 key 配合 v-for，这样便于维护内部组件及其子树的状态。
• 永远不要把 v-if 和 v-for 同时用在同一个元素上。当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级。
• 指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。
• 如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 <div> 元素)。

　　（6）样式　　

• 在单文件组件库中为组件样式设置作用域，可以通过scoped属性来设置，也可以通过CSS Modules来设置（优先推荐它），也可以使用BEM约定。
• 元素选择器应该避免在 scoped 中出现。在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的，所以应该尽可能选用类选择器。

　　（7）模板

• 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。HTML 并不支持自闭合的自定义元素——只有官方的“空”元素。
• 多个 attribute 的元素应该分多行撰写，每个 attribute 一行。
• 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
• 非空 HTML attribute 值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。

　　（8）状态

• 应该优先通过 Vuex 管理全局状态，而不是通过 this.$root 或一个全局事件总线。