vue页面加载闪烁问题的解决方法


Posted in Javascript onMarch 28, 2018

v-if 和 v-show 的区别

v-if只会在满足条件时才会编译,而v-show不管是否满足条件始终会编译,v-show的显示与隐藏只是简单的切换CSS的display属性。

也就是说,在使用v-if时,若值为false,那么页面将不会有这个html标签生成。而v-show:不论其值是false还是true,html元素都会存在,只是简单的切换css的display属性。

使用场景

    一般来说,v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此,如果需要频繁切换 v-show 较好,如果在运行时条件不大可能改变 v-if 较好。  

另外

    1.v-if 指令可以应用于template包装元素上,而v-show不支持template

    2.将v-show应用在组件上时,因为指令的优先级 v-else 会出现问题,解决办法就是用另一个 v-show 替换 v-else

// 错误
  <custom-component v-show="condition"></custom-component>
  <p v-else>这可能也是一个组件</p>
     // 正确做法
  <custom-component v-show="condition"></custom-component>
  <p v-show="!condition">这可能也是一个组件</p>

解决vue页面加载时出现{{message}}闪退

方法一:v-cloak

    v-cloak指令和css规则如[v-cloak]{display:none}一起用时,这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
    v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。

eg:
    // <div> 不会显示,直到编译结束。
    [v-cloak]{
      display:none;
        }
    <div v-cloak>
       {{ message }}
    </div>

方法二:v-text

vue中我们会将数据包在两个大括号中,然后放到HTML里,但是在vue内部,所有的双括号会被编译成textNode的一个v-text指令。

而使用v-text的好处就是永远更好的性能,更重要的是可以避免FOUC (Flash of Uncompiled Content) ,也就是上面与遇到的问题。

eg:
  <span v-text="message"></span>
  <!-- same as -->
  <span>{{message}}</span>

补充:

vue 页面加载进度条组件

页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验

但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度也无法统计。另外,我们不可能监控到所有资源的加载情况。

事实上,用户并不是在乎你的页面究竟加载了百分之几,而真正关心的是离加载完还有多久,以及这个空白页面是没有加载完,还是加载完就是空白的。所以没我们需要去“模拟”一个进度条,在后端数据返回前利用一个假的动画效果模拟加载,在数据返回后读完进度条并且隐藏。

// progress-bar.vue
<template>
 <transition name="fade">
  <div class="progress-bar" v-if="isShow">
  </div>
 </transition>
</template>
<script type="text/babel">
 export default {
  data() {
   return {
    isShow: true, // 是否显示进度条
    val: 0, // 进度
   }
  },
  props: {
   /**
    * 每10毫秒自增幅度
    */
   step: {
    type: Number,
    default: 5,
   },
   /**
    * 初始值
    */
   initVal: {
    type: Number,
    default: 0,
   },
   /**
    * 到一定进度停止
    */
   stopVal: {
    type: Number,
    default: 80,
   },
   /**
    * 进度条继续到成功
    */
   isOk: {
    type: Boolean,
    default: false,
   },
  },
  mounted() {
   // 初始化后加载进度,加载到百分之多少由stopVal决定
   this.val = this.initVal
   let step = this.step
   let timer = setInterval(() => {
    this.val = this.val + step
    this.$el.style.width = this.val + '%'
    // 父组件数据加载完前进度条最多到stopVal的这个百分值
    if (this.val >= this.stopVal) {
     clearInterval(timer)
     return
    }
   }, 10)
  },
  watch: {
   /**
    * 监听组件props变化决定是否继续加载,一般在父组件数据加载完后改变此标志位
    */
   isOk() {
    let val = this.val
    let step = this.step
    let timer = setInterval(() => {
     val = val + step
     this.$el.style.width = val + '%'
     // 加载到百分百完成
     if (val >= 100) {
      // 关闭定时器
      clearInterval(timer)
      // 加载完成关闭进度条
      this.isShow = false
      // 加载完成的回调
      this.$emit('callback', 'load success')
      return
     }
    }, 10)
   },
  },
 }
</script>
<style lang="stylus" rel="stylesheet/stylus">
 .progress-bar {
  position fixed
  top 0
  height 6px
  width 0
  background-color #999
 }
 .fade {
  &-enter-active, &-leave-active {
   transition: all .3s
  }
  &-enter, &-leave-active {
   opacity: 0
  }
 }
</style>

总结

以上所述是小编给大家介绍的vue页面加载闪烁问题的解决方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
Jquery遍历Json数据的方法
Apr 20 Javascript
jQuery获取浏览器类型和版本号的方法
Jul 05 Javascript
轮播图组件js代码
Aug 08 Javascript
Angular 应用技巧总结
Sep 14 Javascript
Vue组件开发初探
Feb 14 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
详解Weex基于Vue2.0开发模板搭建
Mar 20 Javascript
使用javascript做在线算法编程
May 25 Javascript
Vue CL3 配置路径别名详解
May 30 Javascript
基于javascript实现贪吃蛇小游戏
Nov 25 Javascript
基于Web Audio API实现音频可视化效果
Jun 12 Javascript
jQuery实现浏览器之间跳转并传递参数功能【支持中文字符】
Mar 28 #jQuery
vue-cli axios请求方式及跨域处理问题
Mar 28 #Javascript
Vue 项目中遇到的跨域问题及解决方法(后台php)
Mar 28 #Javascript
浅谈React高阶组件
Mar 28 #Javascript
vue数据控制视图源码解析
Mar 28 #Javascript
jQuery+ajax读取json数据并按照价格排序示例
Mar 28 #jQuery
vue 开发一个按钮组件的示例代码
Mar 27 #Javascript
You might like
php 文本文件的读取效率
2012/02/10 PHP
PHP实现带重试功能的curl连接示例
2016/07/28 PHP
利用php做服务器和web前端的界面进行交互
2016/10/31 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
Extjs学习笔记之五 一个小细节renderTo和applyTo的区别
2010/01/07 Javascript
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
javascript实现动态侧边栏代码
2014/02/19 Javascript
js时间比较示例分享(日期比较)
2014/03/05 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
JavaScript评论点赞功能的实现方法
2017/03/13 Javascript
深入掌握 react的 setState的工作机制
2017/09/27 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
angularJS的radio实现单项二选一的使用方法
2018/02/28 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
Python的Django框架安装全攻略
2015/07/15 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
python命令行解析之parse_known_args()函数和parse_args()使用区别介绍
2018/01/24 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
比利时香水网上商店:NOTINO
2018/03/28 全球购物
美国浴缸、水槽和水龙头购物网站:Vintage Tub & Bath
2019/11/05 全球购物
全球领先的在线cosplay服装商店:RoleCosplay
2020/01/18 全球购物
Java文件和目录(IO)操作
2014/08/26 面试题
夫妻分居协议书范本(有子女版)
2014/11/01 职场文书
运动会广播稿50字
2015/08/19 职场文书
pytorch 使用半精度模型部署的操作
2021/05/24 Python
MySQL中distinct和count(*)的使用方法比较
2021/05/26 MySQL
Python内置数据类型中的集合详解
2022/03/18 Python
一行Python命令实现批量加水印
2022/04/07 Python