How to deal with flickering when Vue page is loading

This time I will show you how to deal with flickering when the vue page is loading. What are the precautions when dealing with the flickering when the vue page is loading. The following is a practical case, let's take a look.

The difference between v-if and v-show

v-if will only compile when the conditions are met, while v-show will always compile regardless of whether the conditions are met or not. After compilation, the display and hiding of v-show is just a simple switch of the display attribute of CSS.

That is to say, when using v-if, if the value is false, then the page will not have this html tag generated. And v-show: No matter whether its value is false or true, the html element will exist, just simply switch the display attribute of css.

Usage scenarios

Generally speaking, v-if has a higher switching cost and v-show has a higher initial rendering cost . Therefore, v-show is better if you need to switch frequently, and v-if is better if conditions are unlikely to change at runtime.

In addition

1. The v-if directive can be applied to the template packaging element, but v-show does not support template

2. When applying v-show to a component, there will be a problem because of the priority of the instruction v-else. The solution is to replace v-else with another v-show

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

Solution to {{message}} crash when loading vue page

Method 1: v-cloak

v-cloak command and When used together with css rules such as [v-cloak]{display:none}, this directive can hide uncompiled Mustache tags until the instance is ready.
The v-cloak command can bind a set of css styles like the css selector and then this set of css will take effect until the instance is compiled.

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

Method 2: v-text

In vue we will wrap the data in two curly brackets and then put it in HTML, but inside vue, All double brackets will be compiled into a v-text directive of textNode.

The advantage of using v-text is always better performance, and more importantly, it can avoid FOUC (Flash of Uncompiled Content), which is the problem encountered above.

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

Supplement:

vue page loading progress bar component

Page loading progress bar initially I saw it on YouTube, and it can be seen on almost all major websites later. It can prevent users from staring at a completely blank page when loading the page, and improve the user experience

But from a development perspective, it is really difficult to grasp the authenticity of this kind of progress bar, because we cannot count the progress until the logic code is loaded, and the progress of the logic code itself cannot be counted. In addition, it is impossible for us to monitor the loading of all resources.

In fact, users don’t care what percentage of your page is loaded, but what they really care about is how long it is until it is fully loaded, and whether the blank page has not been fully loaded or is blank after it is loaded. of. So we don't need to "simulate" a progress bar, use a fake animation effect to simulate loading before the back-end data is returned, and read the progress bar and hide it after the data is returned.

// progress-bar.vue
<template>
 <transition name="fade">
  <p class="progress-bar" v-if="isShow">
  </p>
 </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>

Summary

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

How EL gets the context parameter value (with code)

JS makes the left and right lists mutually Movement effect

The above is the detailed content of How to deal with flickering when Vue page is loading. For more information, please follow other related articles on the PHP Chinese website!