项目优化之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 握手 ...
随机推荐
- maven下载出错
求解
- Django——数据库连接配置
配置settings.py : DATABASES = { 'default': { #default表示默认,也可以指定app 'ENGINE': 'django.db.backends.mysql ...
- Python - 3.8 新特性之仅位置参数 & 仅关键字参数
前置知识 Python 函数:https://www.cnblogs.com/poloyy/p/15092393.html 什么是仅限位置形参 仅限位置形参是 Python 3.8 才有的新特性 新增 ...
- vue 路由视图,router-view嵌套跳转
实现功能:制作一个登录页面,跳转到首页,首页包含菜单栏.顶部导航栏.主体,标准的后台网页格式.菜单栏点击不同菜单控制主体展示不同的组件(不同的页面). 配置router-view嵌套跳转需要准备两个主 ...
- Spring Boot 2.x 之 Logging
[源起] 最近在看Apollo的源码,发现其all-in-one项目的脚本demo.sh在执行的时候,竟然没有向控制台输出Spring Boot的日志. 我们修改后构建的Fat Jar,在启动时却打印 ...
- 在C++11编译环境中,简单自测了一下C++标准库中的string/vector和迭代器,记录一下
#include <iostream> #include <vector> using namespace std; int main() { //////////////// ...
- CentOS8部署tftp
tftp:简单文本传输协议,而ftp:文本传输协议.可以把tftp看成是ftp的精简版.tftp用于免登录传输小文件,tftp服务端监听在udp协议的69端口tftp简单的工作原理: tftp服务端与 ...
- 深入剖析RocketMQ源码-NameServer
一.RocketMQ架构简介 1.1 逻辑部署图 (图片来自网络) 1.2 核心组件说明 通过上图可以看到,RocketMQ的核心组件主要包括4个,分别是NameServer.Broker.Produ ...
- (转载https://segmentfault.com/a/1190000016313947)了解RestFul Api架构风格设计
最近几年REST API越来越流行,特别是随着微服务的概念被广泛接受和应用,很多Web Service都使用了REST API. REST是HTTP规范主要编写者之一的Roy Fielding提出的, ...
- centos7安装部署SVN
SVN介绍 SVN是个自由.开源的版本控制系统,绝大多数开源软件都使用SVN作为代码版本管理软件. SVN的官方网站http://subversion.apache.org/.目前SVN在开源社区 ...