Vue 风格指南快速入门

你的名字 2022-06-06 20:10 245阅读 0赞

Vue 官方在最近发布了代码风格指南的BETA版本，旨在引导开发者以正确的方式来书写代码，避免因为不规范而导致的问题。这对于新手开发者来说，只要遵循风格指南的内容，就可以避免很多坑。同时，Vue 官方将所有的规则归为了四个大类：

1.  **A：必须准守的**
2.  **B：强烈推荐**
3.  **C：一般推荐**
4.  **D：谨慎使用**

本文只是节选每个建议的大概内容与用法，给已经熟悉 Vue 的开发者一点提示，具体的细节还是建议学习官方的文档：[Style Guide][]。

## A：必须准守的 ##

*  **组件名应该始终为多个单词组成的，这样可以避免和 HTML 元素冲突（根组件 `App` 除外）。**
 *  **组件的 data 属性必须是一个函数，而它的值必须是返回一个对象。**

export default { 
      data () { return { foo: 'bar' }
      }
    }

*  **Prop 定义应该尽量详细**
 *  **总是为 `v-for` 设置键值 key**
 *  **顶级 App 组件和布局组件中的样式可以是全局的，单文件组件应该设置 scoped**
 *  **在插件、混入等扩展中始终为自定义的私有属性使用 前缀。并附带一个命名空间以回避和其它作者的冲突(比如*yourPluginName*)。**

## B：强烈推荐 ##

*  **当构建系统能够使用不同的文件连接使用，最好将组件独立成单独的文件，这样能够在需要的时候快速的找到**
 *  **单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)。**
 *  **应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。**
 *  **只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。比如头部文件和左侧栏**

components/
    |- TheHeading.vue
    |- TheSidebar.vue

*  **和父组件紧密耦合的子组件应该以父组件名作为前缀命名。**
 *  **组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。**
 *  **在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。**
 *  **在单文件组件和字符串模板中组件名应该总是 PascalCase 的。但是在 DOM 模板中总是 kebab-case 的。**
 *  \*\*JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用Vue.component  
    进行全局组件注册时，可以使用 kebab-case 字符串。\*\*
 *  **组件名应该尽量使用完整单词而不是缩写。**
 *  **在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。**
 *  **多个特性的元素应该分多行撰写，每个特性一行。**

*  **组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。**
 *  **应该把复杂计算属性分割为尽可能多的更简单的属性。**
 *  **非空 HTML 特性值应该始终带引号**
 *  **指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 应该要么都用要么都不用。**

## C：一般推荐 ##

### 组件/实例的选项的顺序 ###

这是官方推荐的组件选项默认顺序。我将它们制作成图表的形式，从而更加直观。

![Vue组件方法建议顺序][Vue]

### 元素特性的顺序 ###

![Vue元素属性建议顺序][Vue 1]

*  **在组件/实例选项中加入空行，使得阅读更加的容易**
 *  **单文件组件应该总是让 template、script和 style标签的顺序保持一致。且**

## D：谨慎使用 ##

*  **没有在 `v-if` / `v-if-else` / `v-else` 中使用 `key`**
 *  **在 组件中的 scoped 中使用元素选择器**
 *  **父子组件通信**
 *  **全局状态管理**

[Style Guide]: https://vuejs.org/v2/style-guide/index.html
[Vue]: https://raw.githubusercontent.com/linxiangjun/Picture/master/blog-img/Vue%E7%BB%84%E4%BB%B6%E6%96%B9%E6%B3%95%E5%BB%BA%E8%AE%AE%E9%A1%BA%E5%BA%8F.png
[Vue 1]: https://raw.githubusercontent.com/linxiangjun/Picture/master/blog-img/Vue%E5%85%83%E7%B4%A0%E5%B1%9E%E6%80%A7%E5%BB%BA%E8%AE%AE%E9%A1%BA%E5%BA%8F.png