Vue前端开发命名规范
命名规范
1.组件名 组件名为多个单词，使用驼峰命名法。
// 示例 export default {
name: 'TpTenderFileMakeMain'
}
2.组件文件 文件的名字如果是多个单词，使用驼峰命名法。 // 正例 TpTenderFileMakeMain.vue
3.文件夹的名字如果是多个单词 使用 - 连接
- 如下：
单文件组件的顶级元素顺序
// 正例 <template> </template> <script> /* JavaScript */ </script> <style> /* CSS */ </style>
vue 暴露方法顺序
暴露出去的部分，要按顺序：
export default { name: 'index', 名称 components: {}, 组件 data() {return{}}, 数据 computed : {val() {return "123";}}, 计算属性 watch: {checkboxModel() {}}, 监听 methods: {}, 操作方法 beforeCreate(){}, 创建之前 created(){}, 创建完成 beforeMount(){}, 挂载之前 mounted(){}, 挂载完成 beforeUpdate(){}, 更新之前 updated(){}, 更新完成 beforeDestroy(){}, 销毁之前 destroyed(){} 销毁完成 }
v-for
在执行 v-for 遍历的时候，总是应该带上 key 值使更新 DOM 时渲染效率更高。 // 正例
JavaScript
1.var / let / const
建议不再使用 var，而使用 let / const，优先使用 const。任何一个变量的使用都要提前申明，除了 function 定义的函数可以随便放在任何位置。
2.引号
建议不再使用双引号，静态字符串使用单引号，动态字符串使用反引号衔接。 // 正例 const foo = '后除' const bar = `${foo}，前端工程师`
3.函数
匿名函数统一使用箭头函数，多个参数/返回值时优先使用对象的结构赋值。 // 正例 function getPersonInfo ({name, sex}) {
// ...
return {name, gender}
} 函数名统一使用驼峰命名，以大写字母开头申明的都是构造函数，使用小写字母开头的都是普通函数，也不该使用 new 操作符去操作普通函数。
4.对象
建议使用扩展运算符拷贝对象而不是 Object.assign(target, ...sources)。 // 正例 const foo = {a: 0, b: 1} const bar = {...foo, c: 2}
对象尽量静态化，添加新属性使用 Object.assign(target, ...sources)。 // 正例 const foo = {a: 3} Object.assign(foo, {b: 4})
若有遍历对象的需求，优先使用 Map 结构 // 正例 const myMap = new Map([]) for (let [key, value] of myMap.entries()) {
// ...
}
5.eval 避免使用 eval，如要进行字符串转化为对象，最好使用浏览器的内置方法来解析 JSON 数据，以确保代码的安全性和数据的合法性。如果浏览器不支持 JSON.parse()，你可以使用 JSON.org 所提供的库。如果不得不使用 eval()，可以尝试用 new Function() 来代替，在 new Function() 中运行的代码会在一个局部函数作用域内执行，因此源码中定义的变量不会自动变成全局变量。
