マスタッシュ構文（{{…}}）による画面のチラツキを防止するv-cloakディレクティブ [Vue.js]

ここでは、Vue.jsのv-cloakディレクティブについて紹介します。

v-cloakディレクティブ

マスタッシュ（Mustache）記法の{{…}}による構文では、ページを起動した最初のタイミングで、一瞬だけバインドした値が反映される前の構文の記述（{{…}}）が一瞬だけ表示されてしまいます。
これは、要素の配下のテキストとしてバインド式を指定しているため、Vue.jsが初期化処理を終えてマスタッシュ記法で記述した部分の{{…}}を処理するまでにわずかなタイムラグが生じる現象です。
ほとんどの場合は一瞬なので、人間が目視で確認できませんが、処理によっては生のコードである「{{…}}」の部分が表示されてしまう「チラツキ」が発生する場合があります。
「{{…}}」が表示されるのは一瞬なので、アプリケーションの動作には影響を与えませんが、エンドユーザーの目に触れてしまうのは望ましい状態とは言えません。

そこでVue.jsには、このチラツキを防止するためにv-cloakディレクティブが用意されています。

v-cloakディレクティブは、関連するコンポーネントのインスタンスがコンパイルを完了するまで要素に残ります。
[v-cloak] { display: none; }のようなCSSのルールと組み合わせることで、Vueインスタンスが用意されるまでの間、コンパイルされていないマスタッシュ記法でバインディングされている部分を隠すことができます。

v-cloakディレクティブの使用例

以下にv-cloakディレクティブの使用例を示します。
ここでは、CSSにv-cloakで要素が非表示になるように「display: none;」を指定しています。

CSS

[v-cloak] {
  display: none;
}

[v-cloak] {

display: none;

}

HTML

<div id="app">
  <div v-cloak>
    {{message}}
  </div>
</div>

</div>

JavaScript

Vue.createApp({
  data: function() {
    return {
      message: 'Hello Vue.js World!'
    }
  }
}).mount('#app')

Vue.createApp({

data: function() {

return {

message: 'Hello Vue.js World!'

}

}).mount('#app')

v-cloakディレクティブを利用する場合は、まず、上記のCSSのようなスタイルシートでv-cloak属性付きの要素を非表示にします。
Vue.jsは、Vueインスタンスの初期化のタイミングでv-cloak属性（ディレクティブ）を検知すると、これを破棄します。
これにより、初期化前には非表示だった要素が、初期化終了後に表示状態になります。
この処理を行うことで、初期化前に{{…}}構文を内包した要素がそのまま表示されてしまうことを防ぐことができるようになります。

Vue.js 入門 Tips 一覧

リンク