前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

Vue编码技巧与规范

首页
2019-06-02 00:25:32
Front-End
Vue

# 一、使用对象代替 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 等方法

# 二、使用 Array.from 快速生成数组

一般我们生成一个有规律的数组会使用循环插入的方法,比如使用时间选择插件时,我们可能需要将小时数存放在数组中

let hours = [];

for (let i = 0; i < 24; i++) {
    hours.push(i + '时');
}
@前端进阶之旅: 代码已经复制到剪贴板
let hours = Array.from({ length: 24 }, 
fe
  • 一、使用对象代替 if 及 switch
  • 二、使用 Array.from 快速生成数组
  • 三、使用 router.beforeEach 来处理跳转前逻辑
  • 四、使用 v-if 来优化页面加载
  • 五、路由跳转尽量使用 name 而不是 path
  • 六、使用 key 来优化 v-for 循环
  • 七、使用 computed 代替 watch
  • 八、统一管理缓存变量
  • 九、不要使用 for in 循环来遍历数组

← Vue之学会编写可复用性模块Vue之项目整合与优化 →