vue开发规范及注意丨技术开发分享录

vue开发规范及注意

{{ detail.nickname }}

转载 翻译 {{ formatTime(detail.create_time) }} 字数 {{ detail.content && detail.content.length }} 阅读 {{ detail.read_num }} {{ formatTag(v) }}

"JavaScript Standard Style:https://standardjs.com/\n\n## 一、善用key\n\n```html\n<ul>\n    <li v-for=\"item in list\" :key=\"item.id\">{{ item.title }}</li>\n</ul>\n```\n\n## 二、v-if不要和v-for同时用\n\n错误示例:\n\n```html\n<ul>\n    <li v-if=\"item.checked\" v-for=\"item in list\" :key=\"item.id\"></li>\n</ul>\n```\n\n<span style=\"color: green\">正确示例:</span>\n\n```html\n<template>\n    <ul>\n        <li v-for=\"item in cList\" :key=\"item.id\"></li>\n    </ul>\n</template>\n\n<script>\n    export default {\n        data() {\n            return {\n                list: []\n            }\n        },\n        computed: {\n            cList() {\n                return this.list.filter(v => v.checked);\n            }\n        }\n    }\n</script>\n```\n\n## 三、标签属性过多以换行展示\n\n错误示例:\n\n```html\n<input class=\"zh-input\" ref=\"input\" v-model=\"form.input\" @keyup.up=\"inputQuery\" @blur=\"closeQuery.list\" @click.top />\n```\n\n<span style=\"color: green\">正确示例:</span>\n\n```html\n<input \n    class=\"zh-input\" \n    ref=\"input\" \n    v-model=\"form.input\" \n    @keyup.up=\"inputQuery\" \n    @blur=\"closeQuery.list\" \n    @click.top />\n```\n\n## 四、善用async、await\n\n```\nexport default {\n    methods: {\n        async getList() {\n            let result = await axios.get('https://www.xxx.com/getlist', {params: {page: 1, pageSize: 15}})\n        }\n    }\n}\n```\n\n## 五、定时任务或长连接退出销毁\n\n```\nexport default {\n    beforeDestroyed() {\n        if(timer) clearInterval(timer);\n        if(socket) socket.emit('pause');\n    }\n}\n```\n\n## 六、善用解构赋值\n\n```\nlet {code, list, msg} = res.data;\n```\n\n## 七、判断是否包含\n\n```\nif('hello'.includes('he')) { // ... }\n\nif(['add', 'edit'].includes('export')) { // ... }\n```\n\n## 八、使用简写指定\n\n```html\n<button type=\"button\" @click=\"handleEdit\" :id=\"item.id\">编辑</button>\n```\n\n## 九、善用环境变量\n\n- .env\n- .env.development\n- .env.production\n\npublic/index.html\n\n```html\n<title><%= VUE_APP_TITLE %></title>\n```\n\nutils/request.js\n\n```\nconst request = axios.create({\n    baseURL: process.env.VUE_APP_API\n})\n```\n\n## 十、公众组件封装\n\n例:把日志组件封装到comments目录下 comments/log.vue\n\n## 十一、高内聚低耦合\n\n除子公众组件其他模块业务放到一个目录下处理,方便查找\n\n## 十二、代码使用2空格缩进\n\n如果你打开chrome控制台审查元素看的话,就会发现解析后的节点是2个空格的,而且现在2空格的布局比较流行,包括js、css,所以建议2空格缩进\n\n## 十三、return和break不要同时用\n\n```\nswitch(type) {\n  case 1:\n   // 业务代码\n   return;\n   break;\n  case 2:\n    // 业务代码\n    break; // 直接使用break即可\n}\n```\n\n## 十四、异步请求放在mounted生命周期里\n\n```\nexport default {\n  mounted() {\n    // 异步请求\n    $.ajax({\n      url: 'https://www.xxx.com/getlist',\n      success() {\n        // ...\n      }\n    })\n  }\n}\n```\n\n当然也可以放在 ``created` 里,因为在这一步,实例已完成以下的配置:数据观测 (data observer),property 和方法的运算,watch/event 事件回调。可以做到请求会早发早得,但实际上也早不了几毫秒,如果涉及到DOM操作的话,还是建议放到 `mounted` 周期里\n\n## 十五、语义话参数\n\n```\n// 单个值\n[1,2,3].forEach((v, i) => {\n  // ...\n})\n\n// 一条记录\n[{name: 'tom', age: 20}, {name: 'rose', age: 18}].forEach((item, i) => {\n  // ...\n})\n\n// 单个值\n$.each({name: 'jack', age: 33}, function(k, v) {\n  // ...\n})\n```\n\n## 十六、善用while循环\n\n```\nlet i = 0;\nwhile (i < 10) {\n    console.log(\"数字是 \" + i)\n    i++;\n}\n```\n\n## 十七、枚举配置\n\n```\n{\n  data: {\n    // 日期类型\n    dateType: [\n      {label: '年', value: 'year'},\n      {label: '月', value: 'month'},\n      {label: '日', value: 'date'}\n    ]\n  }\n}\n```\n\n## 十八、引入第三方资源协议不要写死\n\n```html\n<script type=\"text/javascript\" src=\"//webapi.amap.com/maps?v=1.4.15&key=xxxxxx\"></script>\n```\n\n```\nvar api = location.protocol + '//www.xxx.com/logs'\n```\n\n## 十九、样式目录和类型保持一至\n\n- scss/index.scss\n- css/index.css\n- less/index.less\n- styl/index.styl 或 stylus/index.styl\n\n## 二十、依赖需要指定版本的要特别说明\n\n现在项目使用 `cnpm` `npm` 和 `yarn` 的都有,如果某些依赖需要指定版本,需要在 `README.md` 里添加说明,这样在使用  `cnpm`  安装的时候就可以避免版本问题\n\n>[error] 注意:项目启动需要注意或修改的地方也要备注说明\n\n未完待续..."
PS:写作不易,如要转裁,请标明转载出处。

如果此篇对您有帮助,可小额赞助,以兹鼓励!

猜你想看