Vue.js规范

组件命名规则

【强制】组件名为多单词，命名使用驼峰规则（帕斯卡命名法）

// 反例
export default {
  name: 'todoItem', // 小写大写混用
  name: 'todo',     // 单一命名
  // ...
}
// 正例
export default {
  name: 'TodoItem',
  // ...
}

组件使用规则，npm库中公共组件crec-xxx ，封装组件引用尽量同步

// 正例
<base-button></base-button>

【强制】组件命名结构同一组件包中添加统一命名前缀，需要采用统一的驼峰规则（帕斯卡命名法）

• 统一前缀：在使用公用组件时候需要频繁引用，所以你可能想把它们放到全局而不是在各处分别导入它们。统一前缀有利于打包引用。

// 反例
├── index.html
├── main.js
└── components
    ├── pageheader
    ├── pagearticle
    └── pageheader
// 反例 
├── index.html
├── main.js
└── components
    ├── page-header
    ├── PageArticle
    └── pageheader
// 正例
├── index.html
├── main.js
└── components
    ├── PageHeader
    ├── PageArticle
    └── PageHeader

组件命名紧密耦合

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

Props使用规则

【强制】props 的定义应该尽量详细，至少需要指定其类型

// 反例
props: ['attrM']
// 正例
props: {
  attrM: {
    type: String,        // 指定类型，必填
    required: true,      // 是否必须，选填
    validator: function (value) {   // 数据校验，选填
      return [].indexOf(value) !== -1
    }
  }
}

【强制】props命名使用驼峰规则（帕斯卡命名法）

• 这里需要遵循语言特性，在 HTML 标记中对大小写是不敏感的，使用连接线更加友好；而在 JavaScript 中更自然的是驼峰命名

// 反例
// Vue
props: {
    article-status: Boolean
}
<!-- 在模板中 -->
<article-item :articleStatus="true"></article-item>
// 正例
// Vue
props: {
    articleStatus: Boolean
}
<!-- 在模板中 -->
<article-item :article-status="true"></article-item>

v-for使用规则

【强制】使用v-for时，需要配置key值

• key值使更新 DOM 时渲染效率更高，diff算法更准确

// 反例
<ul>
    <li v-for="item in list">
        {{ item.title }}
    </li>
</ul>
// 正例
<ul>
    <li v-for="item in list" :key="item.id">
        {{ item.title }}
    </li>
</ul>

【强制】使用v-for和v-if，不能同时使用

• 当 Vue 处理指令时，v-for 比 v-if 具有更高的优先级，会造成无效计算和渲染。

// 反例
<ul>
    <li v-for="item in list" :key="item.id" v-if="showList">
        {{ item.title }}
    </li>
</ul>
// 正例
<ul v-if="showList">
    <li v-for="item in list" :key="item.id">
        {{ item.title }}
    </li>
</ul>

组件样式作用域

【建议】组件中如果没有公用样式，推荐使用scoped attribute或者 css Models。

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

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

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

【建议】如果需要多组件应用演示建议使用 BEM 策略。

<!-- 使用 BEM 约定 -->
<style>
.crec-button {
  border: none;
  border-radius: 2px;
}
.crec-button--close {
  background-color: red;
}
</style>

模板表达式使用计算属性

【推荐】组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

// 反例
{{
  name.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

// 正例
<!-- 在模板中 -->
{{ fullName }}
// 复杂表达式已经移入一个计算属性
computed: {
  fullName (val) {
    return val.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

【推荐】vue2中可以使用过滤器

<!-- 在模板中 -->
<template slot="state" slot-scope="text, record">
  <span> {{ record.state | statusFilter(statusList) }}</span>
</template>

// 过滤器中
filters: {
  statusFilter (val, type) {
    const arr = type.filter((item) => item.value === val)
    return arr.length > 0 ? arr[0].text : ''
  }
}

指令缩写规范

【强制】用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:

// 反例
<input
  v-bind:value="text"
  v-on:input="onInput"
>
// 插槽
<template v-slot:header>
  <h1>模板</h1>
</template>

// 正例
<input
  :value="text"
  @input="onInput"
>
// 插槽
<template #header>
  <h1>模板</h1>
</template>

v-if中相同逻辑需要添加key值

【建议】Vue 为了更高效的元素切换，会复用相同的部分，如果本不相同的元素被识别为相同，则会出现意料之外的效果

// 反例
<div v-if="hasData">
    <span>{{ crecData }}</span>
</div>
<div v-else>
    <span>无数据</span>
</div>
// 正例
<div v-if="hasData" key="crec-data">
    <span>{{ crecData }}</span>
</div>
<div v-else key="crec-none">
    <span>无数据</span>
</div>

vue模块顺序

【强制】为了统一和便于阅读，应该按 <template>、<script>、<style>的顺序放置

// 示例
<template>
<!-- HTML -->
</template>
<script>
/* JavaScript */
</script>
<style>
/* CSS */
</style>