Vue的编码技巧与规范使用详解

当我们完成项目的构建，进入开发阶段的时候，除了你需要了解框架本身的知识点外，我们还需要提前掌握一些项目的编码技巧与规范，在根源上解决之后因编码缺陷而导致的项目维护困难、性能下降等常见问题，为项目多人开发提供编码的一致性。

本文将罗列项目中常用的一些编码技巧与规范来帮助大家提升代码质量，并会结合代码片段加强大家的理解与认知。当然不是所有实例都是针对 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: '/',   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