在页面中使用了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. mybatis多参数传递(其中包括数组)

    mapper接口 public void batchDelete(@Param(value = "activityId") Integer activityId, @Param(v ...

  2. log4cplus在VS项目中的使用

    log4cplus是C++编写的开源的日志系统,宣称具有线程安全.灵活.以及多粒度控制的特点,通过将日志划分优先级使其可以面向程序调试.运行.测试.和维护等全生命周期.你可以选择将日志输出到屏幕.文件 ...

  3. idea没配置Tomcat容器报错及解决方法

    servlet报错,提示没有一个容器,需要一个容器来运行,说明没有tomcat容器. 看看idea的配置有没有配置tomcat? 果然没有配置tomcat容器(正常画红框的地方会出现配置的tomcat ...

  4. 纯JS.CSS编写的可拖拽并左右分栏的插件(复制代码就能用)

    <!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equ ...

  5. lock 单例模式

    单例模式只允许创建一个对象,因此节省内存,加快对象访问速度,因此对象需要被公用的场合适合使用,如多个模块使用同一个数据源连接对象等等 网站的计数器,一般也是采用单例模式实现,否则难以同步 单例模式要素 ...

  6. vue的计算属性computed和监听器watch

    <template> <div> this is A.vue <br> <!--计算属性--> <label for="msg" ...

  7. android 开发设计模式---观察者模式

    情景1 有一种短信服务,比如天气预报服务,一旦你订阅该服务,你只需按月付费,付完费后,每天一旦有天气信息更新,它就会及时向你发送最新的天气信息. 情景2 杂志的订阅,你只需向邮局订阅杂志,缴纳一定的费 ...

  8. redis 字符串(string)函数

    字符串(string)函数 get 命令/方法/函数 Description Get the value related to the specified key 取得与指定的键值相关联的值 Para ...

  9. ngx-admin with Asp.net Core 2.0, possibly plus OrchardCore

    1 Download ngx-admin from https://github.com/akveo/ngx-admin 2 Create a new Web Application in vs201 ...

  10. 2017-2018-2 20155228 《网络对抗技术》 实验三:MAL_免杀原理与实践

    2017-2018-2 20155228 <网络对抗技术> 实验三:MAL_免杀原理与实践 实验内容 正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasi ...