一、变量命名规范
1、Vue 响应式对象命名
ref响应式对象：xxxRef
reactive响应式对象: xxxReactive
ref响应式元素：xxxElRef
// 普通对象
const userInfo = {
name: '张三',
age: 18
}
// 响应式对象：ref和reactive
// 如果是ref，规范为：xxxRef。
const nameRef = ref('李四');
// 如果是reactive，xxxReac
const userInfoReac = reactive({
name: '张三',
age: 18
})
// 如果是元素，xxxElRef。 El是为了区分和上面的Ref区别
// html 代码
<div ref="divElRef"></div>
// js代码
const divElRef = ref(null);
2、类型修饰后缀
// 序号采用index，整数采用num，浮点型采用float
let rowIndex = 1; // 行顺序号
let docNum = 155; // 稿件数量
let lengthFloat = 89.5; // 长度通常是整
数型的，加上float作为后缀后，就明确了变量的实际类型
// 字符串采用str，布尔型采用'is'作为前缀
const sex = 1;
const sexStr = ['女', '男', '未知'][sex];
const isMen = sex == 1;
// 数组采用array，集合采用set/map，对象采用obj，JSON采用json
const userObj = {};
const userJson = {};
const userArray = []; // 不建议采用list作为后缀
const userSet = new Set();
const userMap = new Map();
// 类和函数修饰后缀
const xxxFn; // 函数
const xxxCb; // 回调函数（强调：为了避免回调'cb'与采编'cb'的命名歧义，系统中用全大写'CB'代表采
2、UI组件中加载或弹窗控制规范
// 只有一个loading
<a-table :loading="loading" />
// 有多个loading
<a-table :loading="loading" />
<a-table :loading="loadingUserTable" />
<a-table :loading="loadingRoleTable" />
// visible同上
三、Vue 模板中方法名规范
// 提交：handleSubmit或handleSubmitXxx
<a-button type="primary">提交</a-button>
// 保存：handleSave或handleSaveXxx
<a-button type="primary" @click="handleSave">保存</a-button>
// 关闭：handleClose或handleCloseXxx
<a-button type="primary" @click="handleClose">关闭</a-button>
// 打开弹窗：openDialog或openDialogXxx
<a-button type="primary" @click="openDialog">打开弹窗</a-button>
// 关闭弹窗：closeDialog或closeDialogXxx
<a-button type="primary" @click="closeDialog">关闭弹窗</a-button>
// 跳转页面: jump或jumpXxx
<a-button type="primary" @click="jump">跳转页面</a-button>
三、类和类中方法的命名规范 强制
1 类名采用大驼峰方式命名，实例名采用小驼峰方式命名
2 类中方法采用小驼峰方式命名
3 内部方法名前面加下划线，表示私有方法仅限内部调用
4 以上命名方式同样适用于对构造函数及内部方法的命名
