语法规范

1.【强制】prop 的定义应该尽量详细，⾄少需要指定其类型

正例：

props: {
  status: String
}
// better
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

反例：

// 这样做只有开发原型系统时可以接受
props: ['status']

2.【强制】Prop 名⼤⼩写，在声明和使用 prop 的时候，其命名应该始终使⽤ camelCase。

3.【推荐】⾃闭合组件在单⽂件组件、字符串模板和 JSX 中没有内容的组件应该是⾃闭合的；但在 DOM 模板⾥尽量不要这样做。

正例：

<!-- 在单⽂件组件、字符串模板和 JSX 中 -->
<MyComponent/>
<!-- 在 DOM template模板中 -->
<MyComponent></MyComponent>

反例：

<!-- 在单⽂件组件、字符串模板和 JSX 中 -->
<MyComponent></MyComponent>
<!-- 在 DOM template模板中 -->
<my-component/>

4.【强制】模版中的组件名⼤⼩写在单⽂件组件和字符串模板中组件以及DOM 模板中名应该总是PascalCase 的，保持统一，方便搜索定位。

正例：

<!-- 在单⽂件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<MyComponent></MyComponent>

反例：

<!-- 在单⽂件组件和字符串模板中 -->
<mycomponent/>
<!-- 在单⽂件组件和字符串模板中 -->
<myComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>

5.【推荐】多个特性的元素应该分多⾏撰写，每个特性⼀⾏（此项 Volar 插件会⾃动根据⾏宽阈值进⾏⾃动折⾏处理，⼀般⽆需考虑）

正例：

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

反例：

<img src="https://vuejs.org/images/logo.png" alt="Vue Logo">
<MyComponent foo="a" bar="b" baz="c"/>

6.【强制】组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或⽅法

正例：

// 在模板中
{{ normalizedFullName }}
// 复杂表达式已经移⼊⼀个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

反例：

{{
  fullName.split(' ').map(function (word) {
    return word[0].toUpperCase() + word.slice(1)
  }).join(' ')
}}

7.【推荐】应该把复杂计算属性分割为尽可能多的更简单的属性

正例：

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

反例：

computed: {
  finalPrice: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}

8.【强制】⾮空 HTML 特性值应该始终带引号

正例：

<input type="text">
<AppSidebar :style="{ width: sidebarWidth + 'px' }">

反例：

<input type=text>
<AppSidebar :style={width:sidebarWidth+'px'}>

9.【强制】单⽂件组件应该总是按照 <template>、<script>和<style>的标签顺序

正例：

<!-- ComponentA.vue -->
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>