前言:

  在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. maven下载出错

    求解

  2. Django——数据库连接配置

    配置settings.py : DATABASES = { 'default': { #default表示默认,也可以指定app 'ENGINE': 'django.db.backends.mysql ...

  3. Python - 3.8 新特性之仅位置参数 & 仅关键字参数

    前置知识 Python 函数:https://www.cnblogs.com/poloyy/p/15092393.html 什么是仅限位置形参 仅限位置形参是 Python 3.8 才有的新特性 新增 ...

  4. vue 路由视图,router-view嵌套跳转

    实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...

  5. Spring Boot 2.x 之 Logging

    [源起] 最近在看Apollo的源码,发现其all-in-one项目的脚本demo.sh在执行的时候,竟然没有向控制台输出Spring Boot的日志. 我们修改后构建的Fat Jar,在启动时却打印 ...

  6. 在C++11编译环境中,简单自测了一下C++标准库中的string/vector和迭代器,记录一下

    #include <iostream> #include <vector> using namespace std; int main() { //////////////// ...

  7. CentOS8部署tftp

    tftp:简单文本传输协议,而ftp:文本传输协议.可以把tftp看成是ftp的精简版.tftp用于免登录传输小文件,tftp服务端监听在udp协议的69端口tftp简单的工作原理: tftp服务端与 ...

  8. 深入剖析RocketMQ源码-NameServer

    一.RocketMQ架构简介 1.1 逻辑部署图 (图片来自网络) 1.2 核心组件说明 通过上图可以看到,RocketMQ的核心组件主要包括4个,分别是NameServer.Broker.Produ ...

  9. (转载https://segmentfault.com/a/1190000016313947)了解RestFul Api架构风格设计

    最近几年REST API越来越流行,特别是随着微服务的概念被广泛接受和应用,很多Web Service都使用了REST API. REST是HTTP规范主要编写者之一的Roy Fielding提出的, ...

  10. centos7安装部署SVN

      SVN介绍 SVN是个自由.开源的版本控制系统,绝大多数开源软件都使用SVN作为代码版本管理软件. SVN的官方网站http://subversion.apache.org/.目前SVN在开源社区 ...