前言:

  在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的更多相关文章

  1. Vue项目上线环境部署,项目优化策略,生成打包报告,及上线相关配置

    Node.js简介 Node.js是一个基于Chrome V8引擎的JavaScript运行环境,用来方便快速地搭建易于扩展的网络应用.Node.js使用了一个事件驱动.非阻塞式I/O的模型,使其轻量 ...

  2. 【C#】项目优化实战

    [C#]项目优化实战 一. 数据库设计 1. 常量的枚举值直接存中文不要存数字(注意是常量,如果显示值可变就不能) 例如:男女,在数据库中不要存1和0,直接存男和女. 这样的好处:读取数据的时候可以避 ...

  3. 项目优化经验分享(八)TeamLeader经验总结

    引言 通过前面的七篇博客.我把自己在项目优化过程的经验进行了分享,今天这篇博客,作为一个总结,就来讲讲作为一个TeamLeader,在项目管理中遇到的问题和解决经验! 正文 问题一:团队之间怎么沟通? ...

  4. 深入浅出聊Unity3D项目优化:从Draw Calls到GC

    前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...

  5. Unity3D项目优化(转)

    前言: 刚开始写这篇文章的时候选了一个很土的题目...<Unity3D优化全解析>.因为这是一篇临时起意才写的文章,而且陈述的都是既有的事实,因而给自己“文(dou)学(bi)”加工留下的 ...

  6. Spring+SpringMVC+MyBatis+easyUI整合优化篇(十四)谈谈写博客的原因和项目优化

    阶段总结 又到了优化篇的收尾阶段了,这其实是一篇阶段总结性的文章,今天是4月29号,距离第一次发布博客已经两个月零5天,这两个多月的时间,完成了第一个项目ssm-demo的更新,过程中也写了33篇博客 ...

  7. vue-cli 项目优化之3种方法对比:本地静态库资源(推荐)、cdn、DllPlugin

    vue-cli 项目优化之3种方法对比:本地静态库资源(推荐).cdn.DllPlugin 事项 本地静态库资源 cdn DllPlugin 依赖 依赖cdn网站资源(有种完善方法:如果cdn引入不成 ...

  8. vue单页面应用项目优化总结(转载)

    转载自:https://blog.csdn.net/qq_42221334/article/details/81907901这是之前在公司oa项目优化时罗列的优化点,基本都已经完成,当时花了点心思整理 ...

  9. 大型vue单页面项目优化总结

    这是之前在公司oa项目优化时罗列的优化点,基本都已经完成,当时花了点心思整理的,保存在这里,方便以后其他项目用到查漏补缺. 1.打包文件中的app.js文件放入cdn,加快页面首次加载速度 2.提取公 ...

  10. 前端项目优化 -Web 开发常用优化方案、Vue & React 项目优化

    github github-myBlob 从输入URL到页面加载完成的整个过程 首先做 DNS 查询,如果这一步做了智能 DNS 解析的话,会提供访问速度最快的 IP 地址回来 接下来是 TCP 握手 ...

随机推荐

  1. Spring Security进阶

    Spring Security进阶 1.连接数据库进行数据的验证 Spring Security进行身份验证或者权限控制时,用户名和密码应该要和数据库的进行比较才行,用户的各种信息我们从数据库中去获取 ...

  2. 虚拟数字存储表——SQLServer2012可高用

    窗口函数之虚拟数字辅助表 数字辅助表是一个整数序列,可以用它来完成多种不同的查询任务.数字表有很多任务,如生成日期和时间值序列,及分裂值列表.通常,建议在数据库中保存这样一个永久表,并填充尽可能多的数 ...

  3. 洛谷P2424 约数和 题解

    题目 约数和 题解 此题可以说完全就是一道数学题,不难看出这道题所求的是 \(\sum\limits_{i=x}^{y}{\sum\limits_{d|i}{d}}\) 的值. 很显然,用暴力枚举肯定 ...

  4. JDK1.8源码(八)——java.lang.ThreadLocal类

    https://www.cnblogs.com/xdd666/p/14734047.html ThreadLocal https://www.cnblogs.com/yanfei1819/p/1473 ...

  5. shell循环之跳出循环

    1.break break命令允许跳出所有循环(终止执行后面的所有循环). 下面的例子中,脚本进入死循环直至用户输入数字大于5.要跳出这个循环,返回到shell提示符下,需要使用break命令. #! ...

  6. noip模拟37

    \(\color{white}{\mathbb{燕子来时青尚在,木荫遥看杏花菲,名之以:杏红}}\) 考场发现 \(t2\) 基本上是原题,\(t3\) 的套路见过,\(t4\) 像是并查集之类的算法 ...

  7. Pytest系列(12)- 测试结果生成HTML报告插件之pytest-html的详细使用

    如果你还想从头学起Pytest,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1690628.html 环境前提 Python3.6+ 安 ...

  8. 从零开始学习SQL SERVER(2)--- 基本操作及语句

    声明:仅为本人随笔及经验之谈,有错误敬请指出. # 后的文字为注释 Microsoft SQL Server Management Studio 中的SQL命令 添加数据库 1 CREATE DATA ...

  9. Vue个人博客关于标题自动打字机效果Typewriter

    最近在写个人Blog 中间看过很多个人博客的开发 一大部分用的是Hexo框架或者vuePress框架 导入各种主题样式插件等等 但是看多了就会发现 很多博主的个人博客基本都很相似 并没有什么新东西呈现 ...

  10. HDU1213How Many Tables(基础并查集)

    HDU1213How Many Tables Problem Description Today is Ignatius' birthday. He invites a lot of friends. ...