Vue 编码规范

Search…

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.不可以直接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!

我的轻敏捷技术管理方法论

IM客户端设计常见问题

Last modified 1yr ago

Copy link

Contents

基本约束

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

禁止提交非必要 `console.log`

`ESLint` 规则必须通过才能提交

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

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

只添加必要注释

命名规范

class / type 名需要大写开头

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

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

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

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

Vue

Prop

非必填需提供默认值

定义应该尽量详细

Composition API

目录结构

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

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

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

Vuex

禁止在页面中使用 $store API

读取 store 数据，需要通过 `getter`

分发Action 需要使用 mapActions

页面中禁止直接调用 Mutation

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

基本约束

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

禁止提交非必要 console.log

ESLint 规则必须通过才能提交

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

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

只添加必要注释

命名规范

class / type 名需要大写开头

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

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

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

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

Vue

Prop

非必填需提供默认值

定义应该尽量详细

Composition API

目录结构

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

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

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

Vuex

禁止在页面中使用 $store API

读取 store 数据，需要通过 getter

分发Action 需要使用 mapActions

页面中禁止直接调用 Mutation

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

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

禁止提交非必要 `console.log`

`ESLint` 规则必须通过才能提交

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

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

读取 store 数据，需要通过 `getter`