Vue前端开发命名规范

命名规范

• 1.组件名

组件名为多个单词，使用驼峰命名法。

// 示例
export default {
    name: 'TpTenderFileMakeMain'
}

• 2.组件文件

文件的名字如果是多个单词，使用驼峰命名法。

// 正例 TpTenderFileMakeMain.vue

• 3.文件夹的名字如果是多个单词 使用 - 连接 如下：

单文件组件的顶级元素顺序

// 正例
<template>
<!-- HTML -->
</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 时渲染效率更高。 // 正例

<ul>
    <li v-for="item in list" :key="item.id">
        {{ item.title }}
    </li>
</ul>

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() 中运行的代码会在一个局部函数作用域内执行，因此源码中定义的变量不会自动变成全局变量。