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 相关文章推荐
JavaScript修改css样式style
Apr 15 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
在IE 浏览器中使用 jquery的fadeIn() 效果 英文字符字体加粗
Jun 02 Javascript
jquery中html、val与text三者属性取值的联系与区别介绍
Dec 29 Javascript
javascript几个易错点记录
Nov 26 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JavaScript知识点总结(五)之Javascript中两个等于号(==)和三个等于号(===)的区别
May 31 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
Jan 05 Javascript
原生js实现新闻列表展开/收起全文功能
Jan 20 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 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/06/13 PHP
php 判断字符串中是否包含html标签
2014/02/17 PHP
Ajax实现对静态页面的文章访问统计功能示例
2016/10/10 PHP
YII2框架中使用yii.js实现的post请求
2017/04/09 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
标题过长使用javascript按字节截取字符串
2014/04/24 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
js实现点击按钮后给Div图层设置随机背景颜色的方法
2015/05/06 Javascript
javascript实现网页中涉及的简易运动(改变宽高、透明度、位置)
2015/11/29 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
ionic中列表项增加和删除的实现方法
2017/01/22 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
Node绑定全局TraceID的实现方法
2019/11/14 Javascript
如何实现echarts markline标签名显示自己想要的
2020/07/20 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
Python的Django框架中的URL配置与松耦合
2015/07/15 Python
python使用opencv进行人脸识别
2017/04/07 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
python编写微信远程控制电脑的程序
2018/01/05 Python
浅谈python在提示符下使用open打开文件失败的原因及解决方法
2018/11/30 Python
Python实现最大子序和的方法示例
2019/07/05 Python
Django框架中序列化和反序列化的例子
2019/08/06 Python
Python序列对象与String类型内置方法详解
2019/10/22 Python
python文件操作的简单方法总结
2019/11/07 Python
Django 自动生成api接口文档教程
2019/11/19 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
CSS3实现多样的边框效果
2018/05/04 HTML / CSS
详解css3中dispaly的Grid布局与Flex布局
2020/09/11 HTML / CSS
《宿建德江》教学反思
2014/04/23 职场文书
业务员工作态度散漫检讨书
2014/11/02 职场文书
导游词之江西赣州
2019/10/15 职场文书
MySQL系列之一 MariaDB-server安装
2021/07/02 MySQL