当我们完成项目的构建，进入开发阶段的时候，除了你需要了解框架本身的知识点外，我们还需要提前掌握一些项目的编码技巧与规范，在根源上解决之后因编码缺陷而导致的项目维护困难、性能下降等常见问题，为项目多人开发提供编码的一致性。
本文将罗列项目中常用的一些编码技巧与规范来帮助大家提升代码质量，并会结合代码片段加强大家的理解与认知。当然不是所有实例都是针对 Vue.js 开发的，有些同样也适用于其他前端项目。
实例
1. 使用对象代替 if 及 switch
在很多情况下，我们经常会遇到循环判断执行赋值操作的场景，一般我们都会使用 if 及 switch 的条件判断，如果符合则执行赋值，不符合则进入下个判断，比如：
let name = 'lisi'; let age = 18; if (name === 'zhangsan') { age = 21; } else if (name === 'lisi') { age = 18; } else if (name === 'wangwu') { age = 12; } // 或者 switch(name) { case 'zhangsan': age = 21; break case 'lisi': age = 18; break case 'wangwu': age = 12; break }
这样的写法不仅冗余，而且代码执行效率不高，我们可以使用对象的形式简写：
let name = 'lisi'; let obj = { zhangsan: 21, lisi: 18, wangwu: 12 }; let age = obj[name] || 18;
以上这种技巧适用于循环判断一次赋值的情况，如果判断过后有较多处理逻辑的还需要使用 if 或 switch 等方法。
2. 使用 Array.from 快速生成数组
一般我们生成一个有规律的数组会使用循环插入的方法，比如使用时间选择插件时，我们可能需要将小时数存放在数组中：
let hours = []; for (let i = 0; i < 24; i++) { hours.push(i + '时'); }
如果使用 Array.from 我们可以简写为：
let hours = Array.from({ length: 24 }, (value, index) => index + '时');
3. 使用 router.beforeEach 来处理跳转前逻辑
在某些情况下，我们需要在路由跳转前处理一些特定的业务逻辑，比如修改路由跳转、设置 title 等，代码如下：
import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) // 首页 const Home = (resolve => { require.ensure(['../views/home.vue'], () => { resolve(require('../views/home.vue')) }) }) let base = `${process.env.BASE_URL}`; let router = new Router({ mode: 'history', base: base, routes: [ { path: 'https://www.jb51.net/', name: 'home', component: Home, meta: { title: '首页' } }, ] }) router.beforeEach((to, from, next) => { let title = to.meta && to.meta.title; if (title) { document.title = title; // 设置页面 title } if (to.name === 'home') { // 拦截并跳转至 page2 单页，$openRouter 方法在第 5 节中封装 Vue.$openRouter({ name: 'page2' }); } next(); }) export default router
注意最后需要调用 next() 方法执行路由跳转。
4. 使用 v-if 来优化页面加载
在 Vue 页面中，一些模块可能需要用户主动触发才会显示，比如弹框组件等这样的子组件，那么我们可以使用 v-if 来进行按需渲染，没必要一进页面就渲染所有模块。比如：
<template> <div @click="showModuleB = true"></div> <module-b v-if="isShowModuleB"></module-b> </template> <script> import moduleB from 'components/moduleB' export default { data() { return { isShowModuleB: false } }, components: { moduleB } } </script>
这样当 isShowModuleB 为 false 的时候便不会加载该模块下的代码，包括一些耗时的接口调用。当然 v-if 主要适用于代码量较多、用户点击不是很频繁的模块的显示隐藏，同时如果涉及到权限问题的代码都需要使用 v-if，而不是 v-show。
5. 路由跳转尽量使用 name 而不是 path
我们前期配置的路由路径后期难免会进行修改，如果我们页面跳转的地方全是使用的 path，那么我们需要修改所有涉及该 path 的页面，这样不利于项目的维护。而相对于 path，name 使用起来就方便多了，因为其具有唯一性，即使我们修改了 path，还可以使用原来的 name 值进行跳转。
this.$router.push({ name: 'page1' }); // 而不是 this.$router.push({ path: 'page1' });
6. 使用 key 来优化 v-for 循环
v-for 是 Vue 提供的基于源数据多次渲染元素或模板块的指令。正因为是数据驱动，所以在修改列表数据的时候，Vue 内部会根据 key 值去判断某个值是否被修改，其会重新渲染修改后的值，否则复用之前的元素。
这里如果数据中存在唯一表示 id，则推荐使用 id 作为 key，如果没有则可以使用数组的下标 index 作为 key。因为如果在数组中间插入值，其之后的 index 会发生改变，即使数据没变 Vue 也会进行重新渲染，所以最好的办法是使用数组中不会变化且唯一的那一项作为 key 值。例如：