虾米带你轻松搞定Vuejs 系列-CSDN博客

本文链接：https://blog.csdn.net/bensen1989/article/details/85002888

（八）热身指南1-编码技巧与规范

前面几章笔记完成了项目的构建，进入开发阶段之前，除了了解了Vue框架本身的一些知识点外，我决定好事提前掌握一些项目的编码技巧及规范；这样的好处是可以从一开始就考虑到项目的维护、扩展及性能等常见问题。

俗话说，只看不练假把式；我们在看一些编码技巧的时候最好还是敲一下，并结合代码反复推敲增强理解和认识，但是呢，我们发现一些代码不仅仅适用于Vue，其他前端的项目也适用，因为他是js的一些标准和编码要求。

实例

1、针对已知的变量赋值尽可能不用if和switch

在很多情况下，会出现我们的某一个变量在某些条件下需要赋予不同的值场景，最原始的和最基础的方法就是使用条件判断，符合条件赋值，不符合条件进入其他的逻辑。这种逻辑有可能会写很多代码或者是很长的逻辑，我们从性能、可读性、易操作性等等思考，是不是可以使用对象一句话搞定呢？

废话不多说，翠花上代码

未使用对象的情况：

使用对象的情况：

对比上面的代码，发现从代码的写法上冗余，从代码的执行效率上不高，下面优化的代码我们可以代码优雅简练，执行效率高。

2、使用Array.from 快速产生新数组

在产生新数组这一块大家肯定都不陌生，可能有很多方法的，但是我要说的这里是使用from方法快速生成一个数组；比如我想生成一个24小时时间数组，怎么办？

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

在某些情况下，我们需要在路由跳转前处理一些逻辑或者是拦截一些无效的URL地址，我们这里做个简单的title映射。下边我们的代码如下：

我们运行一下，看一下我们的路由跳转前逻辑是否起作用；

除此之外当我们直接在url上敲一个不存在路径的时候，路由会自动拦截并跳转到首页去。

4、多实用vue模板模板语法

vue的模板语法很多，我们这里就不做代码演示了，直接贴上官网地址：https://cn.vuejs.org/v2/guide/syntax.html

5、路由的跳转优化

在处理路由跳转的过程中，前期设置的路由路径后续的逻辑中难免会修改，我们猜想一下每个路径都是用path，一旦涉及到某一个path页面是公用的，那怎么维护呢？我们这时候看一下router的官网的例子多数是用name来匹配的。那我们猜想一下是不是在已经配置了path的路径的路由上我们拦截跳转是不是只是用name就可以了，如果可以我们就可以避免频繁修改path了。

运行项目，随便随便敲一个路径

回车，发现页面闪了一下，又跳到了首页；说明name就可以拦截跳转并适配。

6、是用key来优化v-for

v-for是 Vue 提供的基于源数据多次渲染元素或模板块的指令。正因为是数据驱动，所以在修改列表数据的时候，Vue 内部会根据 key 值去判断某个值是否被修改，其会重新渲染修改后的值，否则复用之前的元素。

这里如果数据中存在唯一表示 id，则推荐使用 id 作为 key，如果没有则可以使用数组的下标 index 作为 key。因为如果在数组中间插入值，其之后的 index 会发生改变，即使数据没变 Vue 也会进行重新渲染，所以最好的办法是使用数组中不会变化且唯一的那一项作为 key 值。例如:

7、是用computed代替watch

很多时候页面会出现 watch 的滥用而导致一系列问题的产生，而通常更好的办法是使用 computed 属性，首先需要区别它们有什么区别：

watch：当监测的属性变化时会自动执行对应的回调函数
computed：计算的属性只有在它的相关依赖发生改变时才会重新求值

其实它们在功能上还是有所区别的，但是有时候可以实现同样的效果，而 computed 会更胜一筹，比如：

使用watch

使用computed

这里我们做个对比，可以看出在处理双向绑定的情况向，使用conputed是不是要合理一些，更符合现代项目的标准，你觉着还是不能说服你自己；好的，画个图理解一下；

我们通过这过程，再结合代码发现computed 监测的是依赖值，依赖值不变的情况下其会直接读取缓存进行复用，变化的情况下才会重新计算；而 watch 监测的是属性值，只要属性值发生变化，其都会触发执行回调函数来执行一系列操作。

8、某些变量需要缓存的尽量统一管理优化

这里不多少说了，在项目中可能会用到浏览器的缓存，常见的就是sessionStorage和localStorage，当一个项目中存在很多这样的缓存存取情况的时候就会变得难以维护和管理，因为其就像全局变量一样散落在项目的各个地方，这时候我们应该将这些变量统一管理起来，放到一个或多个文件中去。

9、尽量不要使用setInterval

一般情况下我们在项目里不建议使用 setInterval，因为其会存在代码的执行间隔比预期小以及 “丢帧” 的现象，原因在于其本身的实现逻辑。很多人会认为 setInterval 中第二个时间参数的作用是经过该毫秒数执行回调方法，其实不然，其真正的作用是经过该毫秒数将回调方法放置到队列中去，但是如果队列中存在正在执行的方法，其会等待之前的方法完毕再执行，如果存在还未执行的代码实例，其不会插入到队列中去，也就产生了 “丢帧”。

而 setTimeout 并不会出现这样的现象，因为每一次调用都会产生了一个新定时器，同时在前一个定时器代码执行完之前，不会向队列插入新的定时器代码。

10、遍历数组少用for in

大家应该都知道 for in 循环是用于遍历对象的，但它可以用来遍历数组吗？答案是可以的，因为数组在某种意义上也是对象，但是如果用其遍历数组会存在一些隐患：其会遍历数组原型链上的属性。为什么呢？因为我们不能保证项目中的代码不会对数组的原型链进行操作，不不敢保证引入的第三方库不对其进行操作，所以尽量不用或者少用for in 来遍历数组。

这里我发现还有很多需要写出来，但是，可能写不完了，这样，我把github上前端的各类规范集合的路径放在这里，方便随时查阅：https://github.com/ecomfe/spec