Vue.js使ってると、ちょっと重たい処理をやる時に、画面にvue.jsで書いた部分がそのまま出力されることがあります。この現象を「ちらつき」と呼ぶ人が多いので、似たような現象に対して、〇〇 ちらつきって検索かけるとヒットすることが多い気がします。
ちらつきってなに
Fliker現象とも呼ぶようです。蛍光灯、水銀灯が激しく明滅することによって、ちらつきとして見える現象のことをこのように呼んでいます。ITでちらつきが使われだしたのは、CRTモニタ（ブラウン管モニタ）はリフレッシュレートが低くて、画面が明滅する現象があったからだと言われています。これ以降、個人的に画面に明滅を伴う不具合がある場合、この症状に対しちらつきという名前がついているように感じます。
ちらつき例
例えば、マウスフォーカスをボタンにあてた際にロールオーバー効果のあるボタンが明滅する場合、ちらつきと呼ばれています。または、ある要素にマウスフォーカスを当てた際に、対象要素が明滅する場合にもこう呼ばれています。
vue.jsでちらつきを消す方法
それでは、本題に戻ります。Vue.jsでちらつきを消す場合、HTMLにV-cloakディレクティブを追加します。これはcssとの組み合わせで動作するので、画面に表示させないまたは透明度を0にするといったようなスタイルを当てる必要があります。こうすることで、v-cloakが、Vueインスタンスを生成する間、Vueオブジェクトと紐づけてる処理や変数を隠すことができます。
<html>
<head>
</head>
<body>
<div id="test" v-cloak>
</div>
</body>
</html>
[v-cloak] {
display: none;
}
具体的に上記のように記述すれば対処することができます。
コメントを残す