Vue 编码规范

基本约束

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

禁止提交非必要 console.log

ESLint 规则必须通过才能提交

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

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

Good ✅

const newValue = cloneDeep(oldValue)

Bad ❌

const newValue = { ...oldValue }

只添加必要注释

如无必要,不要加注释,如有必要,必须加注释。

Good ✅

// Check if an incoming prop key is a declared emit event listener.
// e.g. With `emits: { click: null }`, props named `onClick` and `onclick` are
// both considered matched listeners.
export function isEmitListener(comp: Component, key: string): boolean { ... }

Bad ❌

// 通过id获取字段列表
function getFieldListById() {}

命名规范

class / type 名需要大写开头

Good ✅

class FieldItem {}
const FieldItem = {
id: null,
name: null
}

Bad ❌

class fieldItem {}
const Fielditem = {}

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

Good ✅

const styleConfig = {}
function styleConfig () {}

Bad ❌

const StyleConfig = {}
function Styleconfig () {}

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

关于对应关系不确定的词,禁止使用缩写

Good ✅

const dataSource = {}
function mathJs () {}
const newValue = {}

Bad ❌

const ds = {}
function mathJavaScript () {}
const newVal = {}

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

Good ✅

const BAR_CHART_LENGTH = 70;
const BAR_CHART_TYPE_CHART = "bar";
const BAR_CHART_TYPE_CHART = symbol("bar");

Bad ❌

const barChartLength = 70;
const Bar_chart_CHART = "bar";
const BAR_chart_type_Symbol = symbol("bar");

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

Good ✅

const options = {
field: {
id: "",
name: ""
}
}

Bad ❌

const options = {
field: {
fieldId: "",
fieldName: ""
}
}

Vue

Prop

非必填需提供默认值

定义应该尽量详细

Good ✅

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

Bad ❌

props: ['status']

Composition API

目录结构

组件中使用到的 hook 函数统一放到同级目录下 hook.js 文件中

- src
- components
- Table
- hooks.js // Table 组件使用的所有 hook 函数放到这里
- index.vue
- hooks // 有可能全局使用的 hook 函数放到这里
- views

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

Good ✅

const useTask = () => {
const $hasJob = ref(false);
return { $hasJob }
}

Bad ❌

const getTask = () => {
const hasJob = ref(false);
return { hasJob }
}

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

为了提醒使用变量中的 value 属性获取元素,请使用 ref 包装的响应式变量使用 $ 开头.

Good ✅

const useTask = () => {
const $hasJob = ref(false);
return { $hasJob }
}

Bad ❌

const useTask = () => {
const hasJob = ref(false);
return { hasJob }
}

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

由于在组件中使用 ref 变量不需要使用 value,所以在 setup 方法返回到外部时需要去掉 $.

Good ✅

export default {
setup() {
const { $hasJob } = useTask();
return {
hasJob: $hasJob
}
}
}

Bad ❌

export default {
setup() {
const { $hasJob } = useTask();
return {
$hasJob
}
}
}

Vuex

禁止在页面中使用 $store API

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

读取 store 数据,需要通过 getter

Good ✅

import { mapGetters } from "vuex"
export default {
computed: mapGetters("xList")
}

bad ❌

{
methods: {
computeXList() {
return this.$store.xList;
}
}
}

分发Action 需要使用 mapActions

Good ✅

{
methods: {
mapActions([ "queryFields" ]),
init() {
this.queryFields()
}
}
}

Bad ❌

this.$store.dispatch("queryFields", window.innerHeight);
  1. 不可以直接commit 调用 mutation

Good ✅

{
methods: {
mapActions([ "queryFields" ]),
init() {
this.queryFields()
}
}
}

Bad ❌

this.$store.commit("queryFields", window.innerHeight);

or

{
methods: {
mapMutations([ "queryFields" ]),
init() {
this.queryFields()
}
}
}

页面中禁止直接调用 Mutation

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

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

Good ✅

{
getters: {
currentId(state) {
return state.id
}
}
}

Bad ❌

{
getters: {
currentId(state) {
state.type = state.list[state.id]
return state.id
}
}
}