Vue3 v-cloak ディレクティブ

Vue3 内置指令Vue3 組み込みディレクティブ

v-cloakディレクティブは、コンポーネントインスタンスの準備が完了するまで、未コンパイルのテンプレートを非表示にするために使用されます。

基本説明

v-cloakこのディレクティブは、DOM テンプレートを使用する際の「未コンパイルテンプレートのちらつき」問題を解決するために使用されます。ユーザーがページにアクセスすると、元の{{ }}mustache タグが表示されることがあります。Vue コンポーネントがマウントされ、コンテンツをレンダリングするまで。

v-cloak関連するコンポーネントインスタンスのマウントが完了するまで、要素上に保持されます。CSS ルールと組み合わせることで、この期間中に元のテンプレートを非表示にできます。

  • 期待される型: なし（式は受け付けません）
  • 効果コンポーネントの準備が完了するまで、未コンパイルのテンプレートを非表示にします。

注意: このディレクティブは、ビルドステップがない設定でのみ必要です。

基本的な使い方

使用するv-cloak場合は、CSS ルールを組み合わせる必要があります：

例

/* CSS ルール：v-cloak を持つ要素を非表示にする */
[v-cloak] {
  display: none;
}

例

<div v-cloak>
  {{ message }}
</div>

コンパイルが完了すると、v-cloak属性は自動的に要素から削除され、要素が表示されます。

使用場面

v-cloak主に以下の場面で使用されます：

1、CDN で Vue を導入する

CDN を使って Vue を導入し、ビルドステップがない場合、ページの読み込みと Vue スクリプトの読み込みの間の短い時間に、テンプレートがまだコンパイルされていないことがあります：

例

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-cloak>
      {{ message }}
    </div>
  </div>

  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          message: 'Hello Vue!'
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

2、複雑なテンプレート構造

複数のデータバインディングを含む複雑なテンプレートでは、v-cloak を使用すると、ユーザーが未レンダリングのコンテンツを見るのを防ぐことができます：

例

<div v-cloak>
  <h1>{{ title }}</h1>
  <p>ようこそ、{{ username }}</p>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</div>

v-cloak の動作原理

  1. ページ読み込み時、Vue はまだ初期化されておらず、要素上にv-cloak属性が存在します
  2. CSS ルール[v-cloak] { display: none; }がこれらの要素を非表示にします
  3. Vue が初期化され、テンプレートをコンパイルし、リアクティブデータを作成します
  4. コンポーネントのマウント後、Vue は自動的にv-cloak属性を削除します
  5. 要素が表示され、レンダリングされた内容が表示されます。

注意事項

ビルドステップがないシナリオでのみ使用します: ビルドツール（Vite、Webpack など）を使用する場合、テンプレートはビルド段階で既にコンパイルされているため、v-cloak を使用する必要はありません。

例

/* v-cloak ルールがすべてのスタイルより先に読み込まれるようにする */
/* CSS を head に置くことを推奨します */

<head>
  <style>
    [v-cloak] {
      display: none;
    }
  </style>
</head>

CSS と組み合わせて使用する必要があります: v-cloak 自体はコンテンツを非表示にしません。CSS ルールと組み合わせて初めて有効になります。

モダンなビルドツールとの違い

モダンなビルドツール（Vite など）を使用する場合、v-cloak を使用する必要はありません。理由は次のとおりです：

  • テンプレートはビルド段階で事前にコンパイルされます
  • JavaScript はバンドル後にインライン化または非同期で読み込まれます
  • 初期 HTML には未コンパイルのテンプレート構文が含まれていません

したがって、v-cloak は主に従来の CDN 導入方式やシンプルな HTML ページのシナリオで使用されます。

Vue3 内置指令Vue3 組み込みディレクティブ

その他の拡張