Vue 官方代码风格指南学习记录 （1）

一，必要性的

官方原话：这些规则会帮你规避错误，所以学习并接受它们带来的全部代价吧。这里面可能存在例外，但应该非常少，且只有你同时精通 JavaScript 和 Vue 才可以这样做。精通 嘿嘿嘿！那么问题来了。怎样算精通？

1. 组件名应该始终是多个单词的，根组件 App 以及 <transition>、<component> 之类的 Vue 内置组件除外。

举例

// 反例
app.component('todo', {
  // ...
})

export default {
  name: 'Todo',
  // ...
}

// 正确
app.component('todo-item', {
  // ...
})

export default {
    name: 'TodoItem',
    ...
}

2. props的定义

举例

// 反例
// 简单写传入的属性
props: ['status']

// 正确
props: {
  status: String
}
or

// 更好的例子
props: {
  status: {
    type: String,   // 加入类型判断
    required: true,  //加入是否必须字段
    
    //加入验证规则
    validator: value => {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].includes(value)
    }
  }
}

3.为 v-for 设置 key 值

永远为 v-for 加上 key

举例

// 错误
<ul>
  <li v-for="todo in todos">
    {{ todo.text }}
  </li>
</ul>

// 正确
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>

4.避免 v-if 和 v-for 出现在同一个元素上

举例

// 反例
<ul>
  <li
    v-for="user in users"
    v-if="user.isActive"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

或者

<ul>
  <li
    v-for="user in users"
    v-if="shouldShowUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

// 正确
<ul v-if="shouldShowUsers">
  <li
    v-for="user in users"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

5.为组件样式设置作用域

举例

//错误
<template>
  <button class="btn btn-close">×</button>
</template>

<style>
.btn-close {
  background-color: red;
}
</style>

//正确
<template>
  <button class="button button-close">×</button>
</template>

<!-- 使用 `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>

或者

<template>
  <button :class="[$style.button, $style.buttonClose]">×</button>
</template>

<!-- 使用 CSS modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}

.buttonClose {
  background-color: red;
}
</style>

或者

<template>
  <button class="c-Button c-Button--close">×</button>
</template>

<!-- 使用 BEM 约定 -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}

.c-Button--close {
  background-color: red;
}
</style>

6.私有 property 名称

避免改写 Vue 实例上的属性及方法

举例

//反例
const myGreatMixin = {
  // ...
  methods: {
    update() {
      // ...
    }
  }
}


或者

const myGreatMixin = {
  // ...
  methods: {
    _update() {
      // ...
    }
  }
}

或者

const myGreatMixin = {
  // ...
  methods: {
    $update() {
      // ...
    }
  }
}

或者

const myGreatMixin = {
  // ...
  methods: {
    $_update() {
      // ...
    }
  }
}

// 推荐
const myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update() {
      // ...
    }
  }
}


//更好的例子
const myGreatMixin = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}

function myPrivateFunction() {
  // ...
}

export default myGreatMixin

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

7.组件文件

只要有能够拼接文件的构建系统，就把每个组件单独分成文件。避免使用 component去实例化组件

举例

// 反例
app.component('TodoList', {
  // ...
})

或者

app.component('TodoItem', {
  // ...
})

// 推荐
components/
|- TodoList.js
|- TodoItem.js

或者

components/
|- TodoList.vue
|- TodoItem.vue

8.单文件组件文件的大小写

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)，要么始终是横线连接。

举例

//反例
components/
|- mycomponent.vue

或者

components/
|- myCmponent.vue

//推荐
components/
|- MyComponent.vue

或者

components/
|- my-component.vue

9.基础组件名称

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base,App或 V

举例

//反例
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue

//推荐
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

或者
components/
|- AppButton.vue
|- AppTable.vue
|- AppIcon.vue

或者

components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue

10.单组件名称

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

特点：1.一个页面只出现一次 2.不接受props

//反例
components/
|- Heading.vue
|- MySidebar.vue

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

11. 紧密耦合的组件名称

如果某个父组件基于某个子组件进行扩展的，那么他应当这样进行命名。

举例

//反例
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue


components/
|- SearchSidebar.vue
|- NavigationForSearchSidebar.vue

//推荐
// 我们应当在文件名上体现出来 他们都是基于同一个Todo.vue来扩展的
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue


components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

12.组件名称中的单词顺序

组件名称应该以高阶的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

// 反例
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

13.自闭合组件

在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。

注意：自闭合组件表示它们不仅没有内容，而且刻意没有内容。

举例

// 反例
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>

<!-- 在 DOM 模板中                   -->
<my-component/>

//推荐
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/>

//我的理解应该是指html文件中，这里我也不太明白，知道的可以指出来什么是dom模版
<!-- 在 DOM 模板中                   -->
<my-component></my-component>

14.模板中的组件名称大小写

对于绝大多数项目来说，在单文件组件和字符串模板中组件名称应该总是 PascalCase（小驼峰） 的——但是在 DOM 模板中总是 kebab-case （短横线）的。

举例

//反例
<!-- 在单文件组件和字符串模板中 -->
<mycomponent/>

<!-- 在单文件组件和字符串模板中 -->
<myComponent/>

<!-- 在 DOM 模板中            -->
<MyComponent></MyComponent>

//推荐
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>

<!-- 在 DOM 模板中            -->
<my-component></my-component>

<!-- 在所有地方 -->
<my-component></my-component>

15.JS/JSX 中使用的组件名称

举例

// 反例
app.component('myComponent', {
  // ...
})

import myComponent from './MyComponent.vue'

export default {
  name: 'myComponent',
  // ...
}

export default {
  name: 'my-component',
  // ...
}

//推荐
app.component('MyComponent', {
  // ...
})

app.component('my-component', {
  // ...
})

import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent',
  // ...
}

还没记录完 还有第二节。敬请期待。。。。。。