Vue 编码规范

基本约束

单个JS / Vue 文章代码不能超过 800行

禁止提交非必要 console.log

ESLint 规则必须通过才能提交

变量 / 方法名有拼写错误需修改

能使用 Lodash 的方法不要自己写

Good ✅
1
const newValue = cloneDeep(oldValue)
Copied!
Bad ❌
1
const newValue = { ...oldValue }
Copied!

只添加必要注释

如无必要,不要加注释,如有必要,必须加注释。
Good ✅
1
// Check if an incoming prop key is a declared emit event listener.
2
// e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are
3
// both considered matched listeners.
4
export function isEmitListener(comp: Component, key: string): boolean { ... }
Copied!
Bad ❌
1
// 通过id获取字段列表
2
function getFieldListById() {}
Copied!

命名规范

class / type 名需要大写开头

Good ✅
1
class FieldItem {}
2
const FieldItem = {
3
id: null,
4
name: null
5
}
Copied!
Bad ❌
1
class fieldItem {}
2
const Fielditem = {}
Copied!

方法 / 对象 要采用驼峰命名

Good ✅
1
const styleConfig = {}
2
function styleConfig () {}
Copied!
Bad ❌
1
const StyleConfig = {}
2
function Styleconfig () {}
Copied!

如对应关系未获得广泛认可,禁止使用缩写

关于对应关系不确定的词,禁止使用缩写
Good ✅
1
const dataSource = {}
2
function mathJs () {}
3
const newValue = {}
Copied!
Bad ❌
1
const ds = {}
2
function mathJavaScript () {}
3
const newVal = {}
Copied!

数值 / 字符等基础数据类型常量,使用全大写

Good ✅
1
const BAR_CHART_LENGTH = 70;
2
const BAR_CHART_TYPE_CHART = "bar";
3
const BAR_CHART_TYPE_CHART = symbol("bar");
Copied!
Bad ❌
1
const barChartLength = 70;
2
const Bar_chart_CHART = "bar";
3
const BAR_chart_type_Symbol = symbol("bar");
Copied!

注意对象层级结构,不要重复描述

Good ✅
1
const options = {
2
field: {
3
id: "",
4
name: ""
5
}
6
}
Copied!
Bad ❌
1
const options = {
2
field: {
3
fieldId: "",
4
fieldName: ""
5
}
6
}
Copied!

Vue

Prop

非必填需提供默认值

定义应该尽量详细

Good ✅
1
props: {
2
status: {
3
type: String,
4
required: true
5
}
6
}
Copied!
Bad ❌
1
props: ['status']
Copied!

Composition API

目录结构

组件中使用到的 hook 函数统一放到同级目录下 hook.js 文件中
1
- src
2
- components
3
- Table
4
- hooks.js // Table 组件使用的所有 hook 函数放到这里
5
- index.vue
6
- hooks // 有可能全局使用的 hook 函数放到这里
7
- views
Copied!

所有的 hook 函数必须使用 use 开头

Good ✅
1
const useTask = () => {
2
const $hasJob = ref(false);
3
return { $hasJob }
4
}
Copied!
Bad ❌
1
const getTask = () => {
2
const hasJob = ref(false);
3
return { hasJob }
4
}
Copied!

使用 CompositionAPI ref 开头的变量要使用 $ 开头

为了提醒使用变量中的 value 属性获取元素,请使用 ref 包装的响应式变量使用 $ 开头.
Good ✅
1
const useTask = () => {
2
const $hasJob = ref(false);
3
return { $hasJob }
4
}
Copied!
Bad ❌
1
const useTask = () => {
2
const hasJob = ref(false);
3
return { hasJob }
4
}
Copied!

ref 变量返回时需要去掉 $ 开头

由于在组件中使用 ref 变量不需要使用 value,所以在 setup 方法返回到外部时需要去掉 $.
Good ✅
1
export default {
2
setup() {
3
const { $hasJob } = useTask();
4
return {
5
hasJob: $hasJob
6
}
7
}
8
}
Copied!
Bad ❌
1
export default {
2
setup() {
3
const { $hasJob } = useTask();
4
return {
5
$hasJob
6
}
7
}
8
}
Copied!

Vuex

禁止在页面中使用 $store API

如需要,需使用 mapActions / mapGetters 显示声明

读取 store 数据,需要通过 getter

Good ✅
1
import { mapGetters } from "vuex"
2
3
export default {
4
computed: mapGetters("xList")
5
}
Copied!
bad ❌
1
{
2
methods: {
3
computeXList() {
4
return this.$store.xList;
5
}
6
}
7
}
Copied!

分发Action 需要使用 mapActions

Good ✅
1
{
2
methods: {
3
mapActions([ "queryFields" ]),
4
init() {
5
this.queryFields()
6
}
7
}
8
}
Copied!
Bad ❌
1
this.$store.dispatch("queryFields", window.innerHeight);
Copied!
  1. 1.
    不可以直接commit 调用 mutation
Good ✅
1
{
2
methods: {
3
mapActions([ "queryFields" ]),
4
init() {
5
this.queryFields()
6
}
7
}
8
}
Copied!
Bad ❌
1
this.$store.commit("queryFields", window.innerHeight);
Copied!
or
1
{
2
methods: {
3
mapMutations([ "queryFields" ]),
4
init() {
5
this.queryFields()
6
}
7
}
8
}
Copied!

页面中禁止直接调用 Mutation

Mutation 需在 Action 中 commit,页面只能 dispatch action

禁止在 Getters 中操作 Store 数据、dispatch & commit

Good ✅
1
{
2
getters: {
3
currentId(state) {
4
return state.id
5
}
6
}
7
}
Copied!
Bad ❌
1
{
2
getters: {
3
currentId(state) {
4
state.type = state.list[state.id]
5
return state.id
6
}
7
}
8
}
Copied!