“Vue前端开发命名规范”的版本间的差异
（→命名规范） |
|||
| 第1行： | 第1行： | ||
==命名规范== | ==命名规范== | ||
| − | 1. | + | 1.组件名 |
| + | 组件名为多个单词，使用驼峰命名法。 | ||
| + | |||
| + | // 示例 | ||
| + | export default { | ||
| + | name: 'TpTenderFileMakeMain' | ||
| + | } | ||
| + | |||
| + | 2.组件文件 | ||
| + | 文件的名字如果是多个单词，使用驼峰命名法。 | ||
| + | // 正例 | ||
| + | TpTenderFileMakeMain.vue | ||
| + | |||
| + | 3.文件夹的名字如果是多个单词 使用 - 连接 | ||
*如下： | *如下： | ||
[[文件:20190425.png|缩略图|左]] | [[文件:20190425.png|缩略图|左]] | ||
| + | |||
| + | ==单文件组件的顶级元素顺序== | ||
| + | // 正例 | ||
| + | <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() 中运行的代码会在一个局部函数作用域内执行，因此源码中定义的变量不会自动变成全局变量。 | ||
2019年7月23日 (二) 11:34的版本
命名规范
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() 中运行的代码会在一个局部函数作用域内执行，因此源码中定义的变量不会自动变成全局变量。
