Vue编码技巧和标准使用的详细说明

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

本文将列举一些项目中常用的编码技巧和规范，帮助大家提高代码质量，并结合代码片段增强大家的理解和认知。当然，并不是所有的实例都是为Vue.js开发的，有些也适用于其他前端项目。

例子

1.使用对象代替if和switch

在很多情况下，我们经常会遇到通过循环判断来执行赋值操作的场景。一般我们会用if和switch的条件判断。如果一致，我们就执行赋值，如果不一致，我们就进入下一个判断，例如：

let name=' lisi让年龄=18岁；if(name===' Zhang San '){ age=21；} else if(name===' Lisi '){ age=18；} else if (name==='吴王'){ age=12}//或switch (name) {case '樟山' :age=21break case ' lisi ' : age=18破格‘吴王’:年龄=12；Break}这种写法不仅多余，而且代码执行效率低下。我们可以使用对象形式的缩写：

let name=' lisilet obj={张三： 21，lisi: 18，wangwu : 12 }；让年龄=obj[name]| | 18；上述技术适用于通过循环判断一次分配的情况。如果判断后有更多的处理逻辑，则需要使用if或switch等方法。

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

通常，当我们生成一个规则数组时，我们会使用循环插入的方法。例如，当使用时间选择插件时，我们可能需要将小时存储在数组中：

让小时=[]；for(设I=0；i 24I){ hours . push(I ' time ')；}如果我们使用Array.from，我们可以将其缩写为：

让小时=数组。from ({length : 24}，(value，index)=index ' time ')；3.使用router.beforeEach处理预跳转逻辑

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

从“vue”导入vue从“vue-router”导入router vue . use(router)//home page const home=(resolve={ require . confirm([)./view/home . vue ']，(={ resolve(require('./view/home . vue ')})})让base=` $ { process . env . base _ URL } `；让路由器=新路由器({ mode: 'history '，base: base，routes: [ { path: '/'，name: 'home '，component: Home，meta : { title : ' Home page ' } }，]})路由器。在每一个((to，from，next)={let title=to。meta to . meta . title；if(title){ document . title=title；//设置page title } if(to . name===' home '){//截取并跳转到page2单页，$openRouter方法封装vue。第5节中的$ open router({ name : ' page 2 ' })；} next()；})导出默认路由器请注意，需要调用next()方法来执行路由跳转。

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

在Vue页面中，有些模块可能需要用户触发后才能显示，比如框架组件等子组件，所以我们可以使用v-if按需渲染，不需要一进入页面就渲染所有模块。例如：

template div @ click=' show moduleB=true '/div module-b v-if=' isShowModuleB '/module-b/templatescript import moduleB from ' components/moduleB ' export default { data(){ return { is show moduleB : false } }，components 3360 { moduleB } }/script，因此当is show moduleB为false时，将不会加载此模块下的代码，包括一些耗时的接口调用。当然，v-if主要适用于代码量大、用户点击不频繁的模块的显示和隐藏。同时，如果涉及权限问题的代码需要使用v-if而不是v-show。

5.尝试使用名称代替路径进行路由跳跃

我们前期配置的路由路径，后期不可避免的会被修改。如果我们页面跳转的地方都是我们使用的路径，那么我们需要修改这个路径涉及的所有页面，不利于项目的维护。和path相比，name使用起来要方便很多，因为它是唯一的，即使我们修改path，也可以使用原来的name值进行跳转。

这个。$ router . push({ name : ' page 1 ' })；//而不是这个。$ router . push({ path : ' page 1 ' })；6.使用键优化v形环

V-for是Vue提供的指令，用于根据源数据多次呈现元素或模板块。因为是数据驱动的，所以在修改列表数据的时候，Vue会根据键值来判断某个值是否被修改，并且会重新渲染修改后的值，否则重用之前的元素。

这里，如果数据中有唯一的表示id，建议使用id作为关键字，否则，可以使用数组的索引作为关键字。因为如果在数组中间插入一个值，它后面的索引会发生变化，即使数据没有变化，Vue也会被重新渲染，所以最好的方法就是用数组中不变的唯一项作为键值。例如：

模板ul Li v-for=' arr ' : key=' item . id“{ item . data }”}/Li/ul/templatescript export default { data(){ return { arr : [{ id : 1，data: 'a' }，{id : 2，data:' b'}，{ id : 3，data : ' c ' } }/script 7。用计算机代替手表

很多时候，手表的滥用会导致一系列问题，通常更好的方法是使用计算属性。首先，你需要区分它们之间的区别是什么：

注意：当被监控的属性发生变化时，相应的回调函数会自动执行：只有当相关的依赖关系发生变化时，才会重新评估计算出的属性。事实上，它们在功能上仍然不同，但有时它们可以达到相同的效果，并且计算出来的效果会更好，例如：

template div输入类型='text' v-model='firstName '输入类型=' text ' v-model=' last name ' span { { full name } }/span span { { full name 2 } }/span/div/template script export default { data(){ reurn { first name : ' '，lastName: ' '，fullName2: '' }，//使用computed : { full name(){ return this。名为“这个”。lastname}}，//使用watch watch : { first name 3360 }函数(newval，old val){ this . full name 2=new val ' ' this . last name；}，lastName:函数(newVal，old val){ this . full name 2=this . first name ' ' new val；}，}}/script，通过对比我们可以看出，在处理多数据联动时使用computed更合理。

Computed监视依赖值，如果依赖值不变，它将直接读取缓存进行重用，如果变化，它将重新计算；Watch监控属性值，每当属性值发生变化，就会触发回调函数执行一系列操作。

8.缓存变量的统一管理

浏览器缓存或多或少用在项目中，例如sessionStorage和localStorage。当一个项目中有许多这样的缓存访问时，维护和管理将变得困难，因为它像全局变量一样分散在项目中。此时，我们应该统一管理这些变量，并将它们放在一个或多个文件中，例如：

/* type . js */export const USER _ NAME=' USername '；导出const TOKEN=' token当需要访问时，请直接参考：

从导入{user _ name，token}./types.js '会话存储[user _ name]='张三'；local STORAGE[TOKEN]=' XXX '；使用这种方法的好处是，一旦我们需要修改变量名，就可以直接修改管理文件中的值，而不需要修改使用它的页面。同时可以避免命名冲突等问题，类似于vuex中的突变管理。

9.使用setTimeout而不是setInterval

一般我们不建议在项目中使用setInterval，因为它有代码执行间隔短于预期、丢帧的现象，这是因为它本身的实现逻辑。很多人认为setInterval中第二个时间参数的作用是在这个毫秒之后执行回调方法，但它真正的作用是在这个毫秒之后将回调方法放入队列。但是，如果队列中有正在执行的方法，它将等待前一个方法完成后再执行。如果有未执行的代码实例，就不会插入队列，导致“丢帧”。

SetTimeout没有这样的现象，因为每次调用都会生成一个新的计时器，并且在执行之前的计时器代码之前，不会将新的计时器代码插入到队列中。

//这个定时器实际上会在3s之后立即触发下一个回调setinterval执行这里的代码需要2s { 2s }，1000)；//用setTimeout重写，4秒后触发下一次回调。让do某物=()={//需要2s settimeout (do某物，1000)才能完成这里的代码执行；} doSometing()；延伸阅读：理解“用setTimeout代替setInterval”

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

每个人都应该知道for in循环是用来遍历对象的，但是它能用来遍历数组吗？答案是肯定的，因为数组在某种意义上也是一个对象，但是如果用它来遍历数组就有一些隐患：它会遍历数组原型链上的属性。

让arr=[1，2]；for(让键进入arr){ console . log(arr[key])；//1，2}将正常打印//但是如果在数组原型链中添加了方法array . prototype . test=function(){ }；for(让键进入arr){ console . log(arr[key])；//此时，将打印1，2，(){}}。因为我们不能保证数组原型链不会在项目代码中操作，也不能保证引入的第三方库不会在上面操作，所以我们不应该使用for in循环遍历数组。

结论

本文列举了10个项目中常见的编码技巧和规范。其实技能和规格是相辅相成的，所以不单独列出。当然，在实际的项目开发中有很多这样的例子，需要大家总结整理，比如用name来命名你的组件。如果你有好的想法，也可以在下面的评论区分享给大家学习。

扩展阅读：前端规范的集合

思考作业

可以使用哪些技巧来实现阵列的循环遍历和重复数据消除？如何在Vue项目中使用ESLint规范JS代码？如何在中格式化代码？vue单文件组件？以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。