[Vue.js]v-cloakで、ページ遷移直後のdataのちらつきを防ぐ方法[v-cloak]

この記事をシェアする：

この記事は Vue 2.x 系、 Vuetify 2.x 系 を対象とした記事になります。
2022年3月、Vue 3.x 系統に対応した Vuetify 3 Beta がリリースされました。
Vuetify 3 Beta のインストールを試してみた記事もありますので、ぜひそちらもご覧ください。
対象の記事：Vuetify3 Betaをインストールしてみた件

この記事は、Vue.jsでWebアプリやWebサイトを制作している方向けの記事です。

Vue.js でWebサイトやWebアプリを制作していて、
ページ遷移時に「ん？なに、今のちらつきは…」と思ったこと、ありませんか？

もう一度同じページをリロードしてよく見ると…
マスタッシュ構文（ {{ data名 }} の書き方）を使っている箇所で
（つまりdataを受け取って、値が展開されることを期待している箇所で）
そのdataが描画される前に、data名そのものが表示されてしまっていることに気づくと思います。

せっかく順調にWebアプリなり、Webサイトなりを
Vue.jsで制作をすすめていたのに、これはよろしくありません。

モダンなフロントエンドフレームワークを使っているはずだったのに、
こんなちらつき現象が起きてしまうと、途端、イケてない感じになってしまいますよね。

ではどうすればいいのか。

そこで登場するのが、今回ご紹介する v-cloak になります。

v-cloakを使用して、描画の準備が整うまで、要素を非表示にする

cloak（クローク）と言う言葉の意味は、外套、つまりマントのことですね。

その名が示す通り、v-cloak は、対象とした要素がdataを描画する用意が整うまで、
その要素を覆い隠しておいてくれます。

具体的にどう使用するかというと、次の通りです。

[html (template) 側]

<div v-cloak> <!-- ←対象の要素に v-cloak を指定しておく -->
  {{ dataname }}
</div>

[css側]

[v-cloak] {
  display: none;
}

↑display: none; と組み合わせることで、dataを描画する用意が整うまで、
その要素を覆い隠しておいてくれる、というわけです。

地味なようでいて、使ってみると予想以上に良いです

たかが、一瞬のちらつきなんですが

されど、気になる現象でもあります。
ページ遷移後に一瞬でも展開前のdata名が見えてしまう状態というのは
案外気になって、わずらわしく感じるものです。

ちょっとした違和感を放置しておくと、それはやがて、ストレスの蓄積にもつながります。
ひいては、そのWebアプリやWebサイト全体の仕上がり、クオリティの残念な要素につながってしまうわけです。
（とか偉そうなことを言いつつ、当サイトのVue.jsを使ったサンプルページも、一部そういう箇所があるので順次、直していきます…！）

それらを防ぐためにも、この v-cloak は
せっかく Vue.js にあらかじめ備わっている機能ですので、
くだらないと思わずに、ぜひ活用することをおすすめします。