（八）热身指南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

总结

好吧，就这样吧，今天就到这里，总结一下。开发中常见的编码技巧与规范，其实技巧和规范之间本身就是相辅相成的，所以没有分别进行罗列。当然实际的项目开发中存在着很多这样的例子需要大家自己去归纳和整理。

虾米带你轻松搞定Vuejs 系列相关推荐

【2022 CCF BDCI 文心大模型创意项目】中秋款文心带你轻松搞定MV制作
[2022 CCF BDCI 文心大模型创意项目]中秋款文心带你轻松搞定MV制作项目效果先知项目地址: https://aistudio.baidu.com/aistudio/projectdet ...
苹果怎么批量删除联系人？老司机带你轻松搞定！
苹果怎么批量删除联系人?很多刚刚换到苹果手机的人都会有这样的疑惑,苹果手机删除联系人的时候不能多选,每次删除多个联系人都要一个个手动删除,非常麻烦,有什么简便方法来批量删除联系人么?答案当然是有的,今 ...
轻松搞定python系列
轻松搞定python-变量与数学运算轻轻松松搞定python 轻松搞定python-字符串与序列轻松搞定python-字典与集合变量引用轻松搞定python-流程控制与函数什么是 ...
iframe带了token不显示_不就是登录吗，能有多复杂？sa-token带你轻松搞定多地登陆、单地登录、同端互斥登录...
前言在java的世界里,有很多优秀的权限认证框架,如Apache Shiro.Spring Security 等等.这些框架背景强大,历史悠久,其生态也比较齐全. 但同时这些框架也并非十分完美,在前 ...
java多端登录_【Java】一个登录功能也能玩出这么多花样？sa-token带你轻松搞定多地登录、单地登录、同端互斥登录...
需求场景说起登录,你可能会不屑一顾,还有比这更简单的功能吗? 获取一下用户提交参数 username + password 和数据库中一比对,有记录返回[登录成功],无记录返回[用户名或密码错误] ...
kafka删除队列_没想到 Kafka 还会这样问，学会这些带你轻松搞定大厂面试！
一.前言自上次师兄遭受了面试官「Kafka」的暴击追问后,回来发奋图强,企图"「吊打面试官」",奈何还是面试官套路深啊,最近的面试,又被问到「知识盲点」了!让我们一起来看看, ...
“轻松搞定CMake”系列之CMakeLists文件编写语法规则详解
文章目录基本语法规则常见CMakeLists.txt中指令剖析从VS项目配置过程理解CMakeLists内容 CMake中常用变量汇总常用CMakeLists文件模板基础模板使用OpenC ...
九十八、轻松搞定Python中的Markdown系列
@Author:Runsen @Date:2020/7/15 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
九十七、轻松搞定Python中的PDF办公自动化系列
@Author:Runsen @Date:2020/7/15 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...
九十六、轻松搞定Python中的PPT办公自动化系列
@Author:Runsen @Date:2020/7/14 人生最重要的不是所站的位置,而是内心所朝的方向.只要我在每篇博文中写得自己体会,修炼身心:在每天的不断重复学习中,耐住寂寞,练就真功,不畏 ...

虾米带你轻松搞定Vuejs 系列