vue代码规范

非原创，转公司的，觉得很不错想保存下来，侵权删

组件名为多个单词

组件名应该始终是多个单词的，根组件 App 以及 、 之类的 Vue 内置组件除外。
这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

反例

Vue.component('todo', {
  // ...
})

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

好例子

Vue.component('todo-item', {
  // ...
})

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

* * *

组件数据

组件的 data 必须是一个函数。 [为什么]
当在组件中使用 data property 的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

反例

Vue.component('some-comp', {
  data: {
    foo: 'bar'
  }
})

export default {
  data: {
    foo: 'bar'
  }
}

好例子

Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

// 在一个 Vue 的根实例上直接使用对象是可以的，
// 因为只存在一个这样的实例。
new Vue({
  data: {
    foo: 'bar'
  }
})

* * *

Prop定义

Prop 定义应该尽量详细。
在你提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型。

详解
细致的 prop 定义有两个好处：

• 它们写明了组件的 API，所以很容易看懂组件的用法；
• 在开发环境下，如果向一个组件提供格式不正确的 prop，Vue 将会告警，以帮助你捕获潜在的错误来源。

反例

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

好例子

props: {
  status: String
}

// 更好的做法！
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-for，以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为，比如动画中的对象固化 (object constancy)，也是一种好的做法。

反例

  

    {{ todo.text }}
  

好例子

  

    {{ todo.text }}
  


* * *

避免 v-if 和 v-for 用在一起

永远不要把 v-if 和 v-for 同时用在同一个元素上。 [为什么]
一般我们在两种常见的情况下会倾向于这样做：

• 为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
• 为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

反例

  

    {{ user.name }}
  



  

    {{ user.name }}
  

好例子

  

    {{ user.name }}
  



  

    {{ user.name }}
  

---

为组件样式设置作用域

对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。
这条规则只和单文件组件有关。这让覆写内部样式更容易：使用了常人可理解的 class 名称且没有太高的选择器优先级，而且不太会导致冲突。

反例

好例子

* * *

私有 property 名

使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共 API 的自定义私有 property 使用 yourPluginName)。**
这个约束主要是针对在使用插件及混入功能时，如果没有涉及请忽略。

反例

var myGreatMixin = {
  // ...
  methods: {
    update: function () {
      // ...
    }
  }
}

var myGreatMixin = {
  // ...
  methods: {
    _update: function () {
      // ...
    }
  }
}

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

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

好例子

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

// 甚至更好！
var myGreatMixin = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}

function myPrivateFunction() {
  // ...
}

export default myGreatMixin

* * *

组件文件

只要有能够拼接文件的构建系统，就把每个组件单独分成文件。

反例

Vue.component('TodoList', {
  // ...
})

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

好例子

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

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

* * *

单文件组件文件的大小写

单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)
单词大写开头对于代码编辑器的自动补全最为友好，因为这使得我们在 JS(X) 和模板中引用组件的方式尽可能的一致。

反例

components/
|- mycomponent.vue

components/
|- myComponent.vue

好例子

components/
|- MyComponent.vue

* * *

基础组件名

应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀（Win）开头
基础组件特定的前缀可以避免与三方组件冲突，也方便辨别哪些是自己的组件。

反例

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

好例子

components/
|- WinButton.vue
|- WinTable.vue
|- WinIcon.vue

* * *

单例组件名

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。
这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。

反例

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

好例子

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

* * *

紧密耦合的组件名

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

反例

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

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

好例子

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

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

* * *

组件名中的单词顺序

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

反例

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

* * *

方法命名的单词顺序

** 方法命名应该统一以 动词+名词的形式定义，不应该使用一个单词进行命名，因为不便于描述方法的用途**

反例

function click(){
  // do something
}

好例子

function clickTreeNode(){
  // do something
}

* * *

自闭合组件

在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。
自闭合组件表示它们不仅没有内容，而且刻意没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。

不幸的是，HTML 并不支持自闭合的自定义元素——只有官方的“空”元素。所以上述策略仅适用于进入 DOM 之前 Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。

反例

好例子

* * *

模板中的组件名大小写

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
PascalCase 相比 kebab-case 有一些优势：

• 编辑器可以在模板里自动补全组件名，因为 PascalCase 同样适用于 JavaScript。
• 视觉上比 更能够和单个单词的 HTML 元素区别开来，因为前者的不同之处有两个大写字母，后者只有一个横线。
• 如果你在模板中使用任何非 Vue 的自定义元素，比如一个 Web Component，PascalCase 确保了你的 Vue 组件在视觉上仍然是易识别的。 不幸的是，由于 HTML 是大小写不敏感的，在 DOM 模板中必须仍使用 kebab-case。

反例

好例子

* * *

JS/JSX 中的组件名大小写

JS/JSX 中的组件名应该始终是 PascalCase 的.

反例

Vue.component('myComponent', {
  // ...
})

import myComponent from './MyComponent.vue'

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

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

好例子

Vue.component('MyComponent', {
  // ...
})

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

import MyComponent from './MyComponent.vue'

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

* * *

完整单词的组件名

组件名应该倾向于完整单词而不是缩写。
编辑器中的自动补全已经让书写长命名的代价非常之低了，而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。
反例

components/
|- SdSettings.vue
|- UProfOpts.vue

好例子

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

* * *

Prop 名大小写

在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case。
在 JavaScript 中更自然的是 camelCase。而在 HTML 中则是 kebab-case。
反例

props: {
  'greeting-text': String
}

好例子

props: {
  greetingText: String
}

---

模板中简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法使得代码可以重用。

反例

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

好例子

{{ normalizedFullName }}

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

简单的计算属性

应该把复杂计算属性分割为尽可能多的更简单的 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 值应该始终带双引号

在 HTML 中不带空格的 attribute 值是可以没有引号的，但这鼓励了大家在特征值里不写空格，导致可读性变差。

反例

好例子

* * *

指令缩写

指令缩写 (用 : 表示 v-bind:、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。

反例

好例子

* * *

组件/实例的选项的顺序

组件/实例的选项应该有统一的顺序。

这是公司的组件选项默认顺序。它们被划分为几大类，所以你也能知道从插件里添加的新 property 应该放到哪里。

1. 副作用 (触发组件外的影响)
   • el
2. 全局感知 (要求组件以外的知识)
   • name
   • parent
3. 组件类型 (更改组件的类型)
   • functional
4. 模板修改器 (改变模板的编译方式)
   • delimiters
   • comments
5. 模板依赖 (模板内使用的资源)
   • components
   • directives
   • filters
6. 组合 (向选项里合并 property)
   • extends
   • mixins
7. 接口 (组件的接口)
   • inheritAttrs
   • model
   • props/propsData
8. 本地状态 (本地的响应式 property)
   • data
   • computed
9. 事件 (通过响应式事件触发的回调)
   • watch
   • 生命周期钩子 (按照它们被调用的顺序)
   • · beforeCreate
   • · created
   • · beforeMount
   • · mounted
   • · beforeUpdate
   • · updated
   • · activated
   • · deactivated
   • · beforeDestroy
   • · destroyed
10. 非响应式的 property (不依赖响应系统的实例 property)

*   methods

11. 渲染 (组件输出的声明式描述)

*   template/render
*   renderError

---

元素 attribute 的顺序

元素 (包括组件) 的 attribute 应该有统一的顺序。
这是组件选项的默认顺序。它们被划分为几大类，所以你也能知道新添加的自定义 attribute 和指令应该放到哪里。

1. 定义 (提供组件的选项)
   • is
2. 列表渲染 (创建多个变化的相同元素)
   • v-for
3. 条件渲染 (元素是否渲染/显示)
   • v-if
   • v-else-if
   • v-else
   • v-show
   • v-cloak
4. 渲染方式 (改变元素的渲染方式)
   • v-pre
   • v-once
5. 全局感知 (需要超越组件的知识)
   • id
6. 唯一的 attribute (需要唯一值的 attribute)
   • ref
   • key
7. 双向绑定 (把绑定和事件结合起来)
   • v-model
8. 其它 attribute (所有普通的绑定或未绑定的 attribute)
9. 事件 (组件事件监听器)
   • v-on
10. 内容 (覆写元素的内容)

*   v-html
*   v-text

---

组件/实例选项中的空行

在多个 property 之间增加一个空行。
当你的组件开始觉得密集或难以阅读时，在多个 property 之间添加空行可以让其变得容易。在一些诸如 Vim 的编辑器里，这样格式化后的选项还能通过键盘被快速导航。

好例子

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

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

  label: String,
  icon: String
},

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

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

* * *

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

单文件组件定级元素顺序应该总是让、、

反例

好例子

* * *

隐性的父子组件通信

**应该优先通过 prop 和事件进行父子组件之间的通信，而不是 this.parent 能够简化两个深度耦合的组件。

问题在于，这种做法在很多简单的场景下可能会更方便。但请当心，不要为了一时方便 (少写代码) 而牺牲数据流向的简洁性 (易于理解)。

反例

Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: ''
})

Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  methods: {
    removeTodo () {
      var vm = this
      vm.$parent.todos = vm.$parent.todos.filter(function (todo) {
        return todo.id !== vm.todo.id
      })
    }
  },
  template: `
    
      {{ todo.text }}
      
        X
      
    
  `
})

好例子

Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: `
    
  `
})

Vue.component('TodoItem', {
  props: {
    todo: {
      type: Object,
      required: true
    }
  },
  template: `
    
      {{ todo.text }}
      
        X
      
    
  `
})