vue页面优化中的v-show和v-if使用比较
在页面中使用了v-if做了一个tab框,点击不同的tab框,并加载不同的内容,
由于各tab框对应的内容是4到5张统计图,加载的数据量比较大,发现后台请求响应
返回的时间很快,在100ms以内,但点击tab框切换加载内容时,会有一个明显的卡顿感。

v-if:根据表达式的值在DOM中生成或者销毁一个元素,值是false就会在DOM中销毁,反之会渲染相应元素到DOM中
支持加在<template>标签上
v-show是根据表达式的值来显示或者隐藏元素,根据的是display的值进行控制显隐
不支持加在<template>标签上
在v-if切换的时候,vue内部有一个局部编译/卸载的过程,需要消耗较多时间。因为v-if可能是数据绑定或者子组件。
v-if是真真正正的条件渲染;然而他是惰性的,在初始值是false的时候,他就什么都不足,在为真的时候才会开始局部变异
相比之下v-show则是更简单一下,仅仅是css上的切换
所以,v-if有更高的切换消耗,而v-show有更高的初始渲染消耗;
因此,如果是频繁切换,就用v-show;在条件很难改变,比如某个模块在用户a出显示,就用v-if
据上,我将tab页切换控制显示的v-if改为v-show后,页面会很快的渲染和响应,不再出现短暂的停顿。
vue页面优化中的v-show和v-if使用比较的更多相关文章
- 静态页面HTML中标签的优化(转)
静态页面HTML中标签的优化 (2010-04-03 20:54:06) 标签: 电脑 name 罗马数字 css 表单 杂谈 分类: 网页制作 从网上看了一篇关于静态页面中标签优化的问题,感觉还不错 ...
- VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...
- Vue&Element开发框架中增加工作流处理,工作流的各个管理页面的界面处理
我在起前面的几篇随笔中,大概介绍了工作流的一些场景化处理,包括如何把具体业务表单组件化,并在查看和编辑界面中,动态加载组件内容,以及对于查看申请单的主页面,把审批.取消.发起会签.会签.批示分阅.阅办 ...
- 钉钉登录二维码嵌套在vue页面中
转自 https://www.csdn.net/tags/OtDacg3sMjQ2NTgtYmxvZwO0O0OO0O0O.html 钉钉登录二维码嵌套在vue页面中 2021-09-04 14:42 ...
- Vue 实际项目中你可能会遇见的坑
纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...
- Vue使用过程中常见问题
目录 一.vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发 二.vue用splice删除多维数组元素导致视图更新失败情况 三.vue项目如何部署到php或者java环境的服 ...
- Vue 实际项目中你可能会遇见问题
纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...
- python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)
昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...
- PHP.31-TP框架商城应用实例-后台7-商品会员修改-页面优化,多表数据更新
商品表修改功能 1.页面优化,类似添加页面 <layout name="layout" /> <div class="tab-div"> ...
随机推荐
- mysql--表数据操作
查询: 简单查询 ####查询的字段必须在表中存在 #### 对查询出来的数据进行修改时,不会修改原来的数据,只是修改了可视化的,我们看到的数据. # 查一个数据 select 字段名 from 表名 ...
- loj2083 优秀的拆分 [NOI2016] SA
正解:SA 解题报告: 我永远喜欢loj! 显然$AABB$串相当于是由两个$AA$串拼起来的,所以可以先考虑如果求出来了所有$AA$串怎么求答案? 就假如能统计出$st[i]$表示所有以$i$为开头 ...
- 创建docker公共仓库
1.注册公共仓库的账号 https://hub.docker.com 账号:user-a 密码:pwd 2.Linux中登录docker公共仓库 docker login 3.上传一个docker镜像 ...
- (转)手工释放linux内存——/proc/sys/vm/drop_cache
linux的内存查看: [root@localhost 0.1.0]# free -m total used free shared ...
- JDK8 HashMap--treeify()树形化方法
/*创建红黑树*/ final void treeify(Node<K,V>[] tab) { TreeNode<K,V> root = null;// 定义红黑树根节点roo ...
- ELK+Filebeat 集中式日志解决方案详解
链接:https://www.ibm.com/developerworks/cn/opensource/os-cn-elk-filebeat/index.html?ca=drs- ELK Stack ...
- c#之AES加密解密
.Net已封装好算法,直接调用即可,代码如下: 转载请注明出处:https://www.cnblogs.com/jietian331/p/9707771.html using System; usin ...
- 灵雀云:etcd 集群运维实践
[编者的话]etcd 是 Kubernetes 集群的数据核心,最严重的情况是,当 etcd 出问题彻底无法恢复的时候,解决问题的办法可能只有重新搭建一个环境.因此围绕 etcd 相关的运维知识就比较 ...
- php 图片添加文字,水印
因为工作需求,用到这个,网上找了很多,也没有找到好的方式,最后找到这种感觉比较简单的方式,记录下来,以备后用. $im = imagecreatefrompng("img/yyk_bg. ...
- 关于Win10安装vs2013简体中文语言包无法安装的问题
Win10下安装VS2013后无法安装VS2013中文简体语言包,提示Windows程序兼容模式已打开. 解决方案: 1,随便找个文件夹将简体中文语言包放入其中,发送快捷方式到桌面,右击快捷方式 选择 ...