Vue ページ読み込み時のちらつきに対処する方法

今回は、vue ページ読み込みのちらつきに対処する方法と、vue ページ読み込みのちらつきに対処するときの注意事項を説明します。以下は実際的なケースです。見てみましょう。

v-ifとv-showの違い

v-ifは条件が満たされた場合にのみコンパイルされますが、v-showは条件が満たされているかどうかに関係なく常にコンパイルされます。 v-show は単に CSS 表示プロパティを切り替えるだけです。

言い換えると、v-if を使用する場合、値が false の場合、ページにはこの html タグは生成されません。そして、v-show: 値が false か true かに関係なく、html 要素 は存在し、CSS の表示属性を切り替えるだけです。

使用シナリオ

一般に、v-if はスイッチング コストが高く、v-show は初期レンダリング コストが高くなります。したがって、頻繁に切り替える必要がある場合は v-show が適しており、実行時に条件が変化する可能性が低い場合は v-if が適しています。

さらに

1. v-if ディレクティブはテンプレートのパッケージング要素に適用できますが、v-show はテンプレートをサポートしません

2. v-show がコンポーネントに適用されるとき、ディレクティブ v -else の優先順位によって問題が発生します。解決策は、v-else を別の 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>

vue ページの読み込み時に発生する {{message}} のクラッシュを解決するには

方法 1: v-cloak

v-cloak ディレクティブが [v-cloak]{display:none} などの CSS ルールとともに使用される場合、このディレクティブは、インスタンスの準備ができるまで、コンパイルされていない Mustache タグを非表示にすることができます。
v-cloak コマンドは、css セレクター のような CSS スタイルのセットをバインドでき、その後、この CSS セットはインスタンスがコンパイルされるまで有効になります。

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

方法 2: v-text

vue では、データを 2 つの中括弧で囲んで HTML に配置しますが、vue 内では、すべての二重括弧が textNode -text ディレクティブの v にコンパイルされます。

v-text を使用する利点は常にパフォーマンスが向上することであり、さらに重要なことに、上記で発生した問題である FOUC (未コンパイル コンテンツのフラッシュ) を回避できることです。

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

追加:

vueページ読み込み進行状況バーコンポーネント

私は最初にYouTubeでページ読み込み進行状況バーを見ましたが、その後、ほとんどすべての主要なWebサイトでそれを目にしました。これにより、ユーザーがアクセスできなくなる可能性があります。ページをロードするときに完全に空白のページを見て呆然とするだけで、ユーザー エクスペリエンスが向上します

しかし、開発の観点から見ると、この種のプログレス バーの信頼性を把握するのは非常に困難です。なぜなら、ロジック コードがロードされる前に、ロジックコード自体の進行状況はカウントできません。さらに、すべてのリソースの負荷を監視することは不可能です。

実際、ユーザーはページの何パーセントが読み込まれるかは気にしませんが、本当に気にしているのは、ページが完全に読み込まれるまでの時間と、空白のページが完全に読み込まれていないのか、読み込み後も空白であるのかということです。 。したがって、プログレス バーを「シミュレート」する必要はなく、バックエンド データが返される前に偽のアニメーション効果を使用して読み込みをシミュレートし、データが返された後にプログレス バーを読み取って非表示にする必要はありません。

// 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>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

JS で EL 式を使用してコンテキスト パラメーターを取得する方法

JS を使用して左側のリストを右にパンする方法

以上がVue ページ読み込み時のちらつきに対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。