Vue.jsでコンパイル前のテンプレート変数を隠す

さてさて、Vue.jsを利用しているとコンパイル前に{{}} (マスタッシュ記法)のテンプレート変数が一瞬画面に表示されて不格好に見える問題が発生します。

例えば(無理やりですが)、下記の場合コンパイルまで少なくとも3000msはかかるのでその間テンプレート変数が表示されっぱなしになります。

<div id="js-app">{{test}}</div>

function sleep(time) {
  var d1 = new Date().getTime();
  var d2 = new Date().getTime();
  while (d2 < d1 + time) {
    d2 = new Date().getTime();
   }
   return;
}

new Vue({
    el: '#js-app',
    data: {
      test: 'テスト'
  },
  beforeCompile() {
    sleep(3000);
  }
});

事象

sleepさせることはないにしてもバインディングする変数が多い場合や、DOM構造が複雑な場合この現象は頻繁に発生します。一瞬とは言え{{}}の記述が見えてしまうのは非常に不格好ですよね。

対策

Vue.jsにはv-cloakというディレクティブが用意されています。
公式ドキュメントによると、

このディレクティブは関連付けられた Vue インスタンスのコンパイルが終了するまでの間残存します。[v-cloak] { display: none } のような CSS のルールと組み合わせて、このディレクティブは Vue インスタンス が用意されるまでの間、コンパイルされていない Mustache バインディングを隠すのに使うことができます。

とのことです。

つまるところ、マスタッシュ記法の変数を仕込んだhtmlにv-cloakというディレクティブを付与し、CSSの属性セレクタでdisplay:none;を指定しておくとVueのコンパイルが終わりhtmlが正常に表示できるまで要素を非表示にしておくことができるというものです。

このようにv-cloakディレクティブとCSSを追記する。

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

[v-cloak] {
  display:none;
}

サンプル：Vue.js v-cloak - JSFiddle

まとめ

display:none;だと高さが取得できず、コンパイル完了タイミングで画面がガタガタする可能性もあるので、visibility:hidden;やopacity: 0;を利用していいかもしれませね。
どうでもいいんですが、cloakってマントって意味らしいですね。
知らなかった。(◕ฺ ◡ฺ ◕ฺ)ｵﾗｯｵﾗｯ

参考書籍

基礎から学ぶ Vue.js

Vue.js入門 基礎から実践アプリケーション開発まで