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

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] ディレクティブを使用して非表示を制御し、