這篇文章主要介紹了如何解決vue頁(yè)面加載閃爍的問(wèn)題，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目網(wǎng)站制作、成都做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元嘉陵做網(wǎng)站,已為上家服務(wù),為嘉陵各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

v-if 和 v-show 的區(qū)別

v-if只會(huì)在滿足條件時(shí)才會(huì)編譯，而v-show不管是否滿足條件始終會(huì)編譯，v-show的顯示與隱藏只是簡(jiǎn)單的切換CSS的display屬性。

也就是說(shuō)，在使用v-if時(shí)，若值為false，那么頁(yè)面將不會(huì)有這個(gè)html標(biāo)簽生成。而v-show：不論其值是false還是true，html元素都會(huì)存在，只是簡(jiǎn)單的切換css的display屬性。

使用場(chǎng)景

    一般來(lái)說(shuō)，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在運(yùn)行時(shí)條件不大可能改變 v-if 較好。  

另外

    1.v-if 指令可以應(yīng)用于template包裝元素上，而v-show不支持template

    2.將v-show應(yīng)用在組件上時(shí)，因?yàn)橹噶畹膬?yōu)先級(jí) v-else 會(huì)出現(xiàn)問(wèn)題，解決辦法就是用另一個(gè) v-show 替換 v-else

 // 錯(cuò)誤
  
  這可能也是一個(gè)組件

     // 正確做法
  
  這可能也是一個(gè)組件

解決vue頁(yè)面加載時(shí)出現(xiàn){{message}}閃退

方法一：v-cloak

    v-cloak指令和css規(guī)則如[v-cloak]{display:none}一起用時(shí)，這個(gè)指令可以隱藏未編譯的Mustache標(biāo)簽直到實(shí)例準(zhǔn)備完畢。
    v-cloak 指令可以像css選擇器一樣綁定一套css樣式然后這套css會(huì)一直生效到實(shí)例編譯結(jié)束。

  eg:
    // 
 不會(huì)顯示，直到編譯結(jié)束。
    [v-cloak]{
      display:none;
        }
    
       {{ message }}
    

方法二：v-text

vue中我們會(huì)將數(shù)據(jù)包在兩個(gè)大括號(hào)中，然后放到HTML里，但是在vue內(nèi)部，所有的雙括號(hào)會(huì)被編譯成textNode的一個(gè)v-text指令。

而使用v-text的好處就是永遠(yuǎn)更好的性能，更重要的是可以避免FOUC (Flash of Uncompiled Content) ，也就是上面與遇到的問(wèn)題。

eg:
  
  
  {{message}}

補(bǔ)充：

vue 頁(yè)面加載進(jìn)度條組件

頁(yè)面加載進(jìn)度條最初我是在youtube上看到的，后面幾乎在各大網(wǎng)站上都能見(jiàn)到它的身影，可以讓用戶在加載頁(yè)面的時(shí)候不會(huì)對(duì)著完全空白的頁(yè)面發(fā)呆，提升用戶體驗(yàn)

但是從開(kāi)發(fā)角度講，這種進(jìn)度條在真實(shí)性上確實(shí)很難把握，因?yàn)樵谶壿嫶a加載完成之前，我們都不能統(tǒng)計(jì)到進(jìn)度，而邏輯代碼自身的進(jìn)度也無(wú)法統(tǒng)計(jì)。另外，我們不可能監(jiān)控到所有資源的加載情況。

事實(shí)上，用戶并不是在乎你的頁(yè)面究竟加載了百分之幾，而真正關(guān)心的是離加載完還有多久，以及這個(gè)空白頁(yè)面是沒(méi)有加載完，還是加載完就是空白的。所以沒(méi)我們需要去“模擬”一個(gè)進(jìn)度條，在后端數(shù)據(jù)返回前利用一個(gè)假的動(dòng)畫效果模擬加載，在數(shù)據(jù)返回后讀完進(jìn)度條并且隱藏。

// progress-bar.vue


 export default {
  data() {
   return {
    isShow: true, // 是否顯示進(jìn)度條
    val: 0, // 進(jìn)度
   }
  },
  props: {
   /**
    * 每10毫秒自增幅度
    */
   step: {
    type: Number,
    default: 5,
   },
   /**
    * 初始值
    */
   initVal: {
    type: Number,
    default: 0,
   },
   /**
    * 到一定進(jìn)度停止
    */
   stopVal: {
    type: Number,
    default: 80,
   },
   /**
    * 進(jìn)度條繼續(xù)到成功
    */
   isOk: {
    type: Boolean,
    default: false,
   },
  },
  mounted() {
   // 初始化后加載進(jìn)度，加載到百分之多少由stopVal決定
   this.val = this.initVal
   let step = this.step
   let timer = setInterval(() => {
    this.val = this.val + step
    this.$el.style.width = this.val + '%'
    // 父組件數(shù)據(jù)加載完前進(jìn)度條最多到stopVal的這個(gè)百分值
    if (this.val >= this.stopVal) {
     clearInterval(timer)
     return
    }
   }, 10)
  },
  watch: {
   /**
    * 監(jiān)聽(tīng)組件props變化決定是否繼續(xù)加載，一般在父組件數(shù)據(jù)加載完后改變此標(biāo)志位
    */
   isOk() {
    let val = this.val
    let step = this.step
    let timer = setInterval(() => {
     val = val + step
     this.$el.style.width = val + '%'
     // 加載到百分百完成
     if (val >= 100) {
      // 關(guān)閉定時(shí)器
      clearInterval(timer)
      // 加載完成關(guān)閉進(jìn)度條
      this.isShow = false
      // 加載完成的回調(diào)
      this.$emit('callback', 'load success')
      return
     }
    }, 10)
   },
  },
 }


 .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
  }
 }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“如何解決vue頁(yè)面加載閃爍的問(wèn)題”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!