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
}
使用对象的形式简写:
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)
}
使用Array.from
,可以简写为:
let arr = Array.from({ length: 10 }, (value, index) => index)
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、不同定时器的代码的执行间隔比预期小