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单文件组件?以上就是本文的全部内容。希望对大家的学习有帮助,支持我们。
版权声明:Vue编码技巧和标准使用的详细说明是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。