Vue开发技巧_vue替代if else语句

1. 使用对象代替if及switch

在循环判断一次赋值的情况下，如果使用if及switch来判断，这样不仅冗余，而且代码效率不高。比如：

if(name === 'zhangsan'){
    age = 20;
}else if(name === 'lisi') {
    age = 18;
}else if(name === 'wangwu') {
    age = 21;
}

// 或者
switch(name) {
    case 'zhangsan':
        age = 20;
        break
    case 'lisi':
        age = 18;
        break
    case 'wangwu':
        age = 21;
        break
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用对象的形式简写：
let name = ‘lisi’
let obj = {
zhangsan: 20,
lisi: 18,
wangwu: 21
}
age = obj[name] || 18 // 设置默认值18

2. 使用Array.from快速生成数组

我们在生成一个有规律的数组时会使用循环插入的方法：

let arr = [];
for(let i = 0; i < 10; i++) {
    arr.push(i)
}
1
2
3
4

使用Array.from，可以简写为：

let arr = Array.from({ length: 10 }, (value, index) => index)
1

3. 使用router.beforeEach来处理跳转前逻辑

在某些情况下， 我们需要在路由跳转前处理一些特定的的业务逻辑，比如修改路由跳转，设置title等。

4. 使用v-if来优化页面加载

在一些需要用户主动触发才会显示的模板，比如弹框等组件，我们可以使用v-if来进行按需渲染，没必要一进页面就渲染所有模块

5. 路由跳转尽量使用name而不是path

在项目开发过程中，我们前期配置的路由路径后期难免会进行修改，如果我们使用的是path，那么我们需要修改所有涉及到的该path的页面。而如果我们使用的是name，即使path修改了，还可以用原来的name进行跳转

6. 使用computed代替watch

很多时候页面会出现watch滥用而导致一系列问题的产生，而通常的方法是使用computed属性。

7. 使用 setTimeout 代替 setInterval

setInterval会出现两种情况：1、丢帧；2、不同定时器的代码的执行间隔比预期小

8. 不要用for in循环来遍历数组