官推风格

  • 优先级A：必要的。为了规避错误，这种代码风格是必须的
  • 优先级B：强烈推荐。增加项目的可读性和开发体验
  • 优先级C：推荐。有时可能同时有几种不错的选择。需要注意：前后一致、理由充分
  • 优先级D：谨慎使用。为了该有潜在风险的代码敲个警钟。

Level A

1.vue组件名称推荐由多个单词构成

避免vue组件名和未来html元素的名称重复

2.组件data数据推荐用函数return

保持每个组件的data都应该是独立的状态

3.props推荐用更加详细的定义

1
2
3
4
5
6
7
props: {
  name : {
	type: String,
	default: 'ziwei',
	required: true
  }
}

4.v-for推荐配套的:key

通过唯一的:key复用之前的dom的话，性能更好

5.v-for和v-if避免使用在同一个组件里

v-for和v-if同时出现的话，先v-for，后v-if

6.vue组件样式推荐设置作用域

scoped被设计的初衷是不能让当前组件的样式，影响其他组件的样式。所以你写组件库，不要用scoped
css moudle是利用命名空间和hash来保证作用域

7.自定义的私有属性，推荐$_ + 命名空间作为前缀

Level B

1.能用.vue写的组件，尽量不同vue.component

2.vue组件名称，用PascalCase或者短横线，风格保持统一

3.基础组件命名，以Base前缀开头，以显示其通用性

4.单例组件命名，以The前缀开头，以显示其独特性

某个组件只是在每个页面最多用了一次，并且没有props。就是不可复用组件，用The前缀命名

5.紧密耦合的组件命名。比如紧密耦合的父子组件，子组件以父组件名称为前缀

6.组件命名单词的顺序。先名词后形容词

7.自闭合组件的写法。

8.不同模板中vue命名大小写。如果有编译器的话PascalCase,否则用短横线命名

如果是没有编译器的vue版本，在html里大小写不敏感，你只能用短横线命名。

9.JS/JSX中始终用PascalCase组件命名

10.组件命名单词应该是完整的单词

11.props的命名方式

JS里用驼峰命名，html里用短横线

12.vue组件有多个属性，分多行来写更加清晰易读

1
2
3
4
5
<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

13.模板里复杂逻辑用计算属性或者method

14.复杂的计算属性或者method，拆分成多个

15.html模板的属性推荐用双引号的

16.指令缩写要么不写，要么都用缩写

Level C (常用)

1.组件实例选项的顺序

- el
- name
- components
- filters
- data
- compouted
- watch
- 所有的生命周期钩子
- methods
- template/render
- renderError

2.元素特性的顺序

- v-for
- v-if / v-show
- id
- ref / key / slot
- v-model
- v-on

3.组件实例选项之间，建议加一个空格

4.单文件组件，顶级元素的顺序

<template>
<script>
<style>
*注意style只能在最下面，script和template至少要有一个*

其它

scoped 中的元素选择器

大量使用scoped里的元素 + 自定义属性选择器，性能会慢，尽量用class

隐性的父子组件通信

优先通过 prop 和事件进行父子组件之间的通信，而不是 this.$parent 或改变 prop

非 Flux 的全局状态管理

推荐用vuex，而不是eventbus

参考

Vue风格指南总结