vue开发规范

组件名为多个单词
组件名应该始终为多个单词，防止与现有或未来新的html标签重名冲突
组件的data必须是一个函数
以函数的方式存储数据，每一个函数都是一个独立的内存空间，这样就不会与其他组件的相同名称冲突
Prop 定义应该尽量详细
prop的定义不应该直接写个变量名完事，我们最好以对象的形式给它添加描述

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

为 v-for 设置键值
在组件上总是必须用 key 配合 v-for，以便维护内部组件及其子树的状态，我们也经常会配合key值做一些操作
避免 v-if 和 v-for 用在一起
v-for优先级高于v-if，如果一起使用则会先渲染完所有的元素，再通过判断决定哪些元素被渲染，很显然这是效率极低的不合理做法。所以通常我们会将判断作为计算属性来使用，先过滤出需要渲染的元素，再遍历渲染。

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

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

为组件样式设置作用域
保证该组件的样式只作用于当前组件，添加scoped属性
私有 property 名
在使用插件或混入功能时，为避免冲突，我们应该使用$_命名空间_
的方式命名函数，例如：$_myGreatMixin_update
单文件组件文件的大小写
单文件组件的文件名应该始终是单词大写开头 (PascalCase)
基础组件名
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀（Win）开头，基础组件特定的前缀可以避免与三方组件冲突，也方便辨别哪些是自己的组件
单例组件名
只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。

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

紧密耦合的组件名
如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

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

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

ClearSearchButton.vue  ->  SearchButtonClear.vue

方法命名的单词顺序
方法命名应该统一以 动词+名词的形式定义，不应该使用一个单词进行命名，因为不便于描述方法的用途
自闭合组件
在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
模板中的组件名大小写
对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
JS/JSX 中的组件名大小写
JS/JSX 中的组件名应该始终是 PascalCase 的
完整单词的组件名
组件名应该倾向于完整单词而不是缩写。
编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。
Prop 名大小写
在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。

props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/>

模板中简单的表达式
组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
简单的计算属性
应该把复杂计算属性分割为尽可能多的更简单的 property
将一个复杂的计算属性拆分为多个小的简单计算属性能减少依赖，测试一个小计算属性就会更加容易，细分之后的属性应当起一个描述性的名字，更加利于阅读，开发者才知道这是拿来干什么的。

反例：
computed: {
  price: function () {
    var basePrice = this.manufactureCost / (1 - this.profitMargin)
    return (
      basePrice -
      basePrice * (this.discountPercent || 0)
    )
  }
}
好例子：
computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

带引号的 attribute 值
非空 HTML attribute 值应该始终带双引号

反例

<input type=text>

<AppSidebar :style={width:sidebarWidth+'px'}>
好例子

<input type="text">

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

指令缩写
指令缩写 (用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。
组件/实例选项中的空行
在多个 property 之间增加一个空行。

props: {
  value: {
    type: String,
    required: true
  },

  focused: {
    type: Boolean,
    default: false
  },

  label: String,
  icon: String
},

computed: {
  formattedValue: function () {
    // ...
  },

  inputClasses: function () {
    // ...
  }
}

单文件组件的顶级元素的顺序

<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

隐性的父子组件通信
应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或变更 prop。
一个理想的 Vue 应用是 prop 向下传递，事件向上传递的。遵循这一约定会让你的组件更易于理解。