在页面中使用了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. Applet学习教程(一):applet+dwr 实现

    后台代码 import java.applet.Applet; import java.util.HashMap; import java.util.Map; import netscape.java ...

  2. 004-数据结构之ADT-栈与队列【数组方式实现】

    一.ADT 在介绍抽象数据类型的时候,先看看什么是数据类型,在Java中可能首先会想到像 int,double这样的词,这是Java中的基本数据类型,一个数据类型会涉及到两件事: ①.拥有特定特征的数 ...

  3. Promise (2) 原型上的方法

    "I'm Captain Jack Sparrow" 加勒比海盗5上映,为了表示对杰克船长的喜爱,昨天闪现了几次模仿船长的走路姿势(哈哈哈,简直妖娆). 为了周天能去看电影,要赶紧 ...

  4. 蓝桥杯近3年决赛题之二(16年b组)

    做的时候只做对了第一题. 1. 一步之遥 从昏迷中醒来,小明发现自己被关在X星球的废矿车里.矿车停在平直的废弃的轨道上.他的面前是两个按钮,分别写着“F”和“B”. 小明突然记起来,这两个按钮可以控制 ...

  5. Debian下安装中文包和输入法

    Debian下安装中文包和输入法 #aptitude install locales(没有aptitude的话可以先安装apt-get insall aptitude )  #dpkg-reconfi ...

  6. empty和isset区别

    isset判断变量是否已存在(配置) unset把变量删除(释放)掉 empty 判断变量是否为空 is_null 判断变量是否为NULL is_null,我们可以把它看成是!isset,是isset ...

  7. 大兄dei,早点看清this吧

    说道this,可以说是前端中很重要的问题之一了,也是面试或者笔试常考的问题.所以还是早点看清this吧,大兄dei. this是什么?为什么要存在? this关键字是js中最最复杂的机制之一.他被自动 ...

  8. 论文阅读(Weilin Huang——【arXiv2016】Accurate Text Localization in Natural Image with Cascaded Convolutional Text Network)

    Weilin Huang——[arXiv2016]Accurate Text Localization in Natural Image with Cascaded Convolutional Tex ...

  9. 《ASP.NET Core In Action》读书笔记系列五 ASP.NET Core 解决方案结构解析1

    创建好项目后,解决方案资源管理器窗口里我们看到,增加了不少文件夹及文件,如下图所示: 在解决方案文件夹中,找到项目文件夹,该文件夹又包含五个子文件夹 -Models.Controllers.Views ...

  10. 佳佳的Fibonacci

    #include<cstdio> #include<cstring> #include<iostream> #include<cmath> #inclu ...