项目优化之v-if
前言:
在vue项目中,由于功能比较多,需要各种条件控制某个功能、某个标签、表格中的某一行是否显示等,需要使用大量的v-if来判断条件。
例如:
<div v-if="isShow(a, b)">this is a tag</div>
<input v-model="c"></input>
<script>
new Vue({
data () {
return {
a: 1,
b: 2,
c: ''
}
}
methods: {
isShow(a, b) {
console.log('执行ing')
return +a + +b === 3 ? true : false
}
}
})
</script>
例如上述代码:
我们在输入框中数据数据,每次数据的变化,isShow方法都会执行一遍,如果项目中含有大量这样的代码,那js的执行就很耗费资源,所以我们需要做一个优化,那就是较少这种类似的计算,并且不影响代码的执行,当然存在函数中的条件变化的之后,才会重新执行,这样就大大减少了代码的执行。
废话不多说开始:
思路:使用闭包的方式,将数据结果进行缓存,如果参数数据发生了变化才会执行,否则直接返回数据的结果,那样就减少了很多逻辑的执行。
但是前提条件是:
类似isShow这个方法,要是纯函数(方法的返回值,只和传入的参数有关)。ps:如果isShow的方法是下面这种是不行的,虽然传入的参数是一样的,但是返回结果可能会受到c值得影响
isShow (a, b) {
console.log('执行ing')
return +this.c + +a + +b === 3 ? true : false
}
所以,isShow方法必须是纯函数。
下面我们需要借用闭包得方式,缓存计算得结果,代码如下:
function single () {
const cache = {} // 缓存使用得对象
return function (fn, args) { // 三个参数分别为函数名称,参数
let flagName = `${fn.name}${args.length}`
if (cache[flagName]) { // 查找是否存在这个标记
var cacheFn = cache[flagName] // 如果存在,就取出这个对象
if (JSON.stringify(cacheFn.args) == JSON.stringify(args)) { // 判断两次传入得参数是否相同,如果不相同就重新计算,如果相同就直接返回缓存得结果,下面说明为什么使用JSON.stringify
return cacheFn.result
} else {
cacheFn.args = args
cacheFn.result = cacheFn.fn.apply(null, args)
return cacheFn.result
}
} else {
cache[flagName] = { // 增加这个对象
fn,
args,
result: fn.apply(null, args) // 执行这个方法
}
return cache[flagName].result // 执行返回这个结果
}
}
}
借助上述得方法,我们对开始得代码进行改造:
<div v-if="single(isShow, [a, b]))">this is a tag</div>
<input v-model="c"></input>
<script>
new Vue({
data () {
return {
a: 1,
b: 2,
c: ''
}
}
methods: {
isShow(a, b) {
console.log('执行ing')
return +a + +b === 3 ? true : false
}
}
})
</script>
经过这样得改造,每次输入框中得值发生变化,会执行single方法,在single中,缓存了isShow方法执行得结果,只要a,b两个值发生变化就不会重新执行isShow方法,这样就做到了节省了很多代码得执行
ps:为什么使用JSON.stringify(args)?
例如:
function func (a, b) {}
要判断参数的内容和上次是否一样,使用toString方法可以判断和上次缓存的是否一样
但是如果传入的参数是引用复杂类型('a', {b: 1, c: {d: 2}}),使用JSON.stringify将参数格式化,哪怕是引用类型的一个值或者属性发生变化,都可以对比出不同,至于复杂类型中存在函数、正则,由参数的对象返回结果,不考虑,因为项目中没用到。也没遇到过这么变态的。
项目优化之v-if的更多相关文章
- Vue项目上线环境部署,项目优化策略,生成打包报告,及上线相关配置
Node.js简介 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,用来方便快速地搭建易于扩展的网络应用.Node.js使用了一个事件驱动.非阻塞式I/O的模型,使其轻量 ...
- 【C#】项目优化实战
[C#]项目优化实战 一. 数据库设计 1. 常量的枚举值直接存中文不要存数字(注意是常量,如果显示值可变就不能) 例如:男女,在数据库中不要存1和0,直接存男和女. 这样的好处:读取数据的时候可以避 ...
- 项目优化经验分享(八)TeamLeader经验总结
引言 通过前面的七篇博客.我把自己在项目优化过程的经验进行了分享,今天这篇博客,作为一个总结,就来讲讲作为一个TeamLeader,在项目管理中遇到的问题和解决经验! 正文 问题一:团队之间怎么沟通? ...
- 深入浅出聊Unity3D项目优化:从Draw Calls到GC
前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...
- Unity3D项目优化(转)
前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...
- Spring+SpringMVC+MyBatis+easyUI整合优化篇(十四)谈谈写博客的原因和项目优化
阶段总结 又到了优化篇的收尾阶段了,这其实是一篇阶段总结性的文章,今天是4月29号,距离第一次发布博客已经两个月零5天,这两个多月的时间,完成了第一个项目ssm-demo的更新,过程中也写了33篇博客 ...
- vue-cli 项目优化之3种方法对比:本地静态库资源(推荐)、cdn、DllPlugin
vue-cli 项目优化之3种方法对比:本地静态库资源(推荐).cdn.DllPlugin 事项 本地静态库资源 cdn DllPlugin 依赖 依赖cdn网站资源(有种完善方法:如果cdn引入不成 ...
- vue单页面应用项目优化总结(转载)
转载自:https://blog.csdn.net/qq_42221334/article/details/81907901这是之前在公司oa项目优化时罗列的优化点,基本都已经完成,当时花了点心思整理 ...
- 大型vue单页面项目优化总结
这是之前在公司oa项目优化时罗列的优化点,基本都已经完成,当时花了点心思整理的,保存在这里,方便以后其他项目用到查漏补缺. 1.打包文件中的app.js文件放入cdn,加快页面首次加载速度 2.提取公 ...
- 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化
github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...
随机推荐
- Spring Security进阶
Spring Security进阶 1.连接数据库进行数据的验证 Spring Security进行身份验证或者权限控制时,用户名和密码应该要和数据库的进行比较才行,用户的各种信息我们从数据库中去获取 ...
- 虚拟数字存储表——SQLServer2012可高用
窗口函数之虚拟数字辅助表 数字辅助表是一个整数序列,可以用它来完成多种不同的查询任务.数字表有很多任务,如生成日期和时间值序列,及分裂值列表.通常,建议在数据库中保存这样一个永久表,并填充尽可能多的数 ...
- 洛谷P2424 约数和 题解
题目 约数和 题解 此题可以说完全就是一道数学题,不难看出这道题所求的是 \(\sum\limits_{i=x}^{y}{\sum\limits_{d|i}{d}}\) 的值. 很显然,用暴力枚举肯定 ...
- JDK1.8源码(八)——java.lang.ThreadLocal类
https://www.cnblogs.com/xdd666/p/14734047.html ThreadLocal https://www.cnblogs.com/yanfei1819/p/1473 ...
- shell循环之跳出循环
1.break break命令允许跳出所有循环(终止执行后面的所有循环). 下面的例子中,脚本进入死循环直至用户输入数字大于5.要跳出这个循环,返回到shell提示符下,需要使用break命令. #! ...
- noip模拟37
\(\color{white}{\mathbb{燕子来时青尚在,木荫遥看杏花菲,名之以:杏红}}\) 考场发现 \(t2\) 基本上是原题,\(t3\) 的套路见过,\(t4\) 像是并查集之类的算法 ...
- Pytest系列(12)- 测试结果生成HTML报告插件之pytest-html的详细使用
如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 环境前提 Python3.6+ 安 ...
- 从零开始学习SQL SERVER(2)--- 基本操作及语句
声明:仅为本人随笔及经验之谈,有错误敬请指出. # 后的文字为注释 Microsoft SQL Server Management Studio 中的SQL命令 添加数据库 1 CREATE DATA ...
- Vue个人博客关于标题自动打字机效果Typewriter
最近在写个人Blog 中间看过很多个人博客的开发 一大部分用的是Hexo框架或者vuePress框架 导入各种主题样式插件等等 但是看多了就会发现 很多博主的个人博客基本都很相似 并没有什么新东西呈现 ...
- HDU1213How Many Tables(基础并查集)
HDU1213How Many Tables Problem Description Today is Ignatius' birthday. He invites a lot of friends. ...