vueページ読み込み時のちらつき問題の解決策

この記事では主に、Vue ページの読み込み時に点滅する問題の解決策を紹介し、v-if と v-show の違いと、Vue ページの読み込み時に {{message}} がクラッシュする問題を解決する 2 つの方法について説明します。 . 興味のある友達、一緒に見てみましょう

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 内ではすべての二重括弧が v-text にコンパイルされます。 textNode のディレクティブ。

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 + &#39;%&#39;
    // 父组件数据加载完前进度条最多到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 + &#39;%&#39;
     // 加载到百分百完成
     if (val >= 100) {
      // 关闭定时器
      clearInterval(timer)
      // 加载完成关闭进度条
      this.isShow = false
      // 加载完成的回调
      this.$emit(&#39;callback&#39;, &#39;load success&#39;)
      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>

以上、皆様のお役に立てれば幸いです。

関連記事:

サーバーから返されたXMLのAJAX処理方法

AJAXの簡単な非同期通信例分析

AjaxをベースにしたJavaScriptで、更新せずにWebページ上のファイル内容を動的に表示

以上がvueページ読み込み時のちらつき問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。