在页面中使用了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使用比较的更多相关文章

  1. 静态页面HTML中标签的优化(转)

    静态页面HTML中标签的优化 (2010-04-03 20:54:06) 标签: 电脑 name 罗马数字 css 表单 杂谈 分类: 网页制作 从网上看了一篇关于静态页面中标签优化的问题,感觉还不错 ...

  2. VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题

    VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题:https://blog.csdn.net/jerrica/article/d ...

  3. Vue&Element开发框架中增加工作流处理,工作流的各个管理页面的界面处理

    我在起前面的几篇随笔中,大概介绍了工作流的一些场景化处理,包括如何把具体业务表单组件化,并在查看和编辑界面中,动态加载组件内容,以及对于查看申请单的主页面,把审批.取消.发起会签.会签.批示分阅.阅办 ...

  4. 钉钉登录二维码嵌套在vue页面中

    转自 https://www.csdn.net/tags/OtDacg3sMjQ2NTgtYmxvZwO0O0OO0O0O.html 钉钉登录二维码嵌套在vue页面中 2021-09-04 14:42 ...

  5. Vue 实际项目中你可能会遇见的坑

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...

  6. Vue使用过程中常见问题

    目录 一.vue监听不到state数组/json对象内的元素的值的变化,要手动通知触发 二.vue用splice删除多维数组元素导致视图更新失败情况 三.vue项目如何部署到php或者java环境的服 ...

  7. Vue 实际项目中你可能会遇见问题

    纸上得来终觉浅,绝知此事要躬行! Vue的文档和教程看的太多,小的demo做的多,也不如自己实际的进行一个完整项目的开发.只有做了才知道原来问题这么多,这里列举了一些你做demo教程可能不会遇见的坑. ...

  8. python 全栈开发,Day92(编程式的导航,vue页面布局,marked包的使用)

    昨日内容回顾 1. 组件间的传值 1. bus --> 空Vue对象 通过向bus对象抛出自定义事件的方式在组件间传递信息 2. 注意事项: 1. bus.$on()应该在组件mounted(挂 ...

  9. PHP.31-TP框架商城应用实例-后台7-商品会员修改-页面优化,多表数据更新

    商品表修改功能 1.页面优化,类似添加页面 <layout name="layout" /> <div class="tab-div"> ...

随机推荐

  1. JMeter学习-042-JMeter BeanShell 脚本应用实例之正则应用:正则提取,批量获取测试数据

    特别声明:本示例中,涉及的脚本及通过脚本获取的数据,仅可作为学习使用,禁止任何商业用途.若因使用人非法使用而构成违法或犯罪,由具体违法或犯罪的使用人自行承担.与本人及技术博客无关. 实际测试过程中经常 ...

  2. gdb调试原理及qemu中的gdbserver

    (一)gdb调试原理 此部分转自:https://blog.csdn.net/u012658346/article/details/51159971     https://www.cnblogs.c ...

  3. 点击按钮如何改变当前窗口的url

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. python练习题-day24

    1.单继承 class Animal: def __init__(self,name,hp,aggr): self.name=name self.hp=hp self.aggr=aggr def ea ...

  5. 【托业】【跨栏】TEST05

    22 23 21. 22 23 24 25 REVIEW TEST05

  6. yum 运行失败

    https://stackoverflow.com/questions/47633870/rpm-lib64-liblzma-so-5-version-xz-5-1-2alpha-not-found- ...

  7. REDHAT YUM本地源的搭建和使用

    yum源一般分为两种,本地yum源和本地网络yum源,前者是通过文件提供安装包,后者是通过网络下载安装包: 由于Redhat7.3的yum源需要注册付费,所以往往会出现下载yum源安装包失败,如下图: ...

  8. 接口自动化框架(java)--3.get,delete请求,Excel管理多种请求类型

    这套框架的报告是自己封装的 每种请求类型放入不同的sheet中,就可以避免新建太多的excel去做数据驱动. XSSFSheet类提供了一个读取sheet的方法,getSheetAt(int),通过下 ...

  9. Hadoop多租户架构配置

    cloudera manager 进到cluster里面,点击Dynamic Resource Pools,没做任何配置默认情况下,资源池里有个default资源组 hadoop jar /usr/l ...

  10. Mac OS X 下安装使用 Docker (2017年7月)

    两年前的一篇 Mac OS X 下安装使用 Docker 安装时还是用的 boot2docker, 如今进化到了在 Mac OS X 下用 Docker Toolbox, 而且命令也由 boot2do ...