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

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

この記事は、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 にあらかじめ備わっている機能ですので、
くだらないと思わずに、ぜひ活用することをおすすめします。


v-cloak についての公式解説ページ

Vue.js公式サイトの、次のページに解説があります。
API — Vue.js

この記事のまとめ

今回は、Vue.jsを使って制作をしている際に起きる、
地味な現象ではあるものの
放置しておくとおそらく誰もが気になると思われる
「ページ遷移直後のちらつき現象」について、v-cloak を使って解消する方法について、書きました。

この v-cloak ですが、Vue.jsのバージョン2系でも3系でも使用できるものですので、
覚えていて損はない情報かと思います。

当サイトでは、今後も Vue.js や Vuetify に関する記事を、継続して書いていく予定です。

※この記事は、内容の品質向上を目的に、随時更新を行う場合があります。