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"> ...
随机推荐
- 1840: Jack Straws
1840: Jack Straws 时间限制(普通/Java):1000MS/10000MS 内存限制:65536KByte 总提交: 168 测试通过:129 描述 I ...
- 将dataframe分割为训练集和测试集两部分
data = pd.read_csv("./dataNN.csv",',',error_bad_lines=False)#我的数据集是两列,一列字符串,一列为0,1的labelda ...
- hystrix参数使用方法
hystrix+feign+ribbon,但是可能很多人都知道hystrix还有线程隔离,信号量隔离,等等各种参数配置,在这几就记录下hystrix的参数, 一.hystrix参数使用方法 通过注解@ ...
- 3.3.1 MyBatis框架介绍
MyBatis框架介绍 1. 什么是框架 (1) 框架是偷懒的程序员将代码进行封装, 之后进行重复使用的过程. (2) 框架其实是一个半成品, 以连接数据库为例, 连接数据库使用的驱动, url, 用 ...
- UML作业第三次:分析《书店图书销售管理系统,绘制类图
plantuml类图绘制方法的学习: 1.关于类图的学习: 类图显示了系统的静态结构. 类:类图中的主要元素,用矩形表示.矩形的上层表示类名.中层表示属性.下层表示方法. 类之间的关系:关联.依赖.聚 ...
- DS18B20初上电显示85℃问题
以前用的温度采集都是用的AD,这次改为了DS18B20,看了资料,没有很复杂的部分,重要的就是时序.板子出来后初步测试也能正常读取温度,然而有个问题比较奇怪,就是在板子初上电时读取温度总是显示为+85 ...
- mysql导入本地文件(作业)
1.准备本地文件(pet.txt) 2.在CMD中启动mysql服务,然后输入以下命令导入(pet.txt) load data local infile '路劲' into table pet; 3 ...
- 构建RN或Weex项目时,使用Android Studio常遇到的问题
1 . androidStudio报错No cached version available for offline mode 解决方法 原因是之前为了提高编译速度,在Gradle设置选项中开启了Of ...
- 运输计划NOIP2015Day2T3
运输计划 题目描述 公元 2044 年,人类进入了宇宙纪元. L 国有 n 个星球,还有 n-1 条双向航道,每条航道建立在两个星球之间,这 n-1 条 航道连通了 L 国的所有星球. 小 P 掌管一 ...
- random模块、time模块、sys模块、os模块
一.random模块 1.随机取小数 (数学计算) print(random.random()) #取0-1之间的小数 print(random.uniform(3,6)) #uniform( ...