Vue 项目构建与开发入门：从编码技巧与规范开始

目录

实例

1. 使用对象代替 if 及 switch

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

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

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

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

6. 使用 key 来优化 v-for 循环

7. 使用 computed 代替 watch

8. 统一管理缓存变量

9. 使用 setTimeout 代替 setInterval

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

结语

---

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

本文将罗列项目中常用的一些编码技巧与规范来帮助大家提升代码质量，并会结合代码片段加强大家的理解与认知。当然不是所有实例都是针对 Vue.js 开发的，有些同样也适用于其他前端项目。

实例

1. 使用对象代替 if 及 switch

在很多情况下，我们经常会遇到循环判断执行赋值操作的场景，一般我们都会使用 if 及 switch 的条件判断，如果符合则执行赋值，不符合则进入下个判断，比如：

let name = 'lisi';
let age = 18;

if (name === 'zhangsan') {
    age = 21;
} else if (name =