v-cloak を使用して Vue のフラッシュの問題を解決する方法

Vue は、ユーザー インターフェイスを構築するための進歩的なフレームワークであり、プロジェクトのフロントエンド インターフェイスの開発に Vue を使用し始めている開発者が増えています。 Vue を使用する過程で、スタイルの点滅の問題に直面することがあります。この記事では、この問題を解決するために Vue で v-cloak を使用する方法を紹介します。

スタイルフラッシュの問題とは何ですか?

Vue がコンポーネントをレンダリングするとき、テンプレートで Vue データ バインディングが使用されている場合、まずデータが解析され、次にデータの変更によって生じた差異が DOM に更新されます。このプロセスにはある程度の時間がかかり、特にデータが複雑な場合や DOM ノードが多い場合は、ページの読み込み時にコンポーネントがレンダリングされるときにスタイルが簡単に変更されます。この状況はスタイルと呼ばれます。Flash の質問です。

次の 2 つの実装がそれぞれ紹介されます:

1. CSS の表示属性を使用する

Vue コンポーネントでは、スタイルを通じて表示属性を none に設定できます。属性を変更し、mounted() ライフサイクル中にブロックするように変更しました。 Vue コンポーネントがレンダリングされた後、すべての CSS がロードされるため、コンポーネントの DOM は最初にロードされるまで非表示になります。

<template>
  <div class="container" v-cloak>隐藏结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

この方法は比較的単純で、単純なページに適しています。ただし、ページが複雑な場合、または非同期データを読み込む必要がある場合には、この方法は適さない可能性があります。次に、v-cloak を使用して実装することを検討できます。

2. v-cloak を使用する

v-cloak は Vue が提供するディレクティブの 1 つで、コンパイルされていない Mustache 構文を非表示にするために使用できます。 v-cloak 要素とその子は、Mustache 構文が実際の値に解析されるまで、display:none のままになります。 Vue コンパイラの準備が完了すると、v-cloak 要素が削除されます。

<template>
  <div class="container" v-cloak>显示结果</div>
</template>
<style>
  [v-cloak] {
    display: none;
}
</style>

<script>
export default {
  mounted () {
    this.$nextTick(() => {
      this.show = true
    })
  }
}
</script>

コンポーネントの [v-cloak] ディレクティブを使用して非表示を制御し、c9ccee2e6ea535a969eb3f532ad9fe89 を通じてスタイルを設定し、要素を非表示状態に設定します。このようにして、Vue インスタンスがロードされる前に、コンポーネントに非同期リクエストや計算されたプロパティなどの多くの時間のかかる操作が含まれている場合でも、コンポーネントを非表示にしておくことができ、スタイルの点滅の問題を回避できます。

v-cloak を使用する利点は、Vue コンパイラの準備後に v-cloak 要素が自動的に削除されるため、表示属性を手動で切り替える必要がなく、コードとメンテナンスが簡素化されることです。

その他のソリューション

上記の 2 つのソリューションに加えて、vue-loader の postcss プラグイン autoprefix を前処理に使用することもできます。このプラグインは CSS スタイルのプレフィックスを自動的に追加することができ、ちらつきの問題をすべて解決するわけではありませんが、優れた解決策となります。実装は次のとおりです。

module.exports = {
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              plugins: [require('autoprefixer')]
            }
          }
        ]
      }
    ]
  }
}

概要

スタイル フラッシュの問題を解決するには多くの方法があり、上記の 2 つの方法で期待どおりの結果を得ることができます。 v-cloak の使用は、全体的な外観を構築する最良の方法の 1 つですが、多くの場合、JavaScript によって display:none 要素のアニメーションが無効になることに注意してください。したがって、v-cloak を使用する場合は、アニメーション効果が必要な要素の選択に注意してください。

以上がv-cloak を使用して Vue のフラッシュの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。