Vue.jsでレンダリング時の画面のチラツキを軽減する方法

Vue.js/Nuxt.js

2020.09.27 2020.07.29

環境
v-cloakを使う

環境

バージョン：2.6.11
CDN版

v-cloakを使う

Vue.jsに標準で搭載されているv-cloakという機能を使います。

今回はサンプルとして下のコードを使用します。

<html>
    <head>
    </head>
    <body>
        <div id="app">
            {{message}}
            <div v-show="show">
                Content
            </div>
        </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello",
                show:false,
            }
})
    </script>
    </body>
</html>

この状態だとVuejsのローディング中にContentが表示されてしまったり{{message}}と表示されてしまったりするのでv-cloakを設定します。

<html>
    <head>
    <style>
    [v-cloak]{
        display:none;
    }
    </style>
    </head>
    <body>
        <div id="app" v-cloak>
            {{message}}
            <div v-show="show">
                Content
            </div>
        </div>
     <script src="https://cdn.jsdelivr.net/npm/vue@2.6.11"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"hello",
                show:false,
            }
})
    </script>
    </body>
</html>

idにappが指定されているdivタグにv-cloakを指定してCSSからv-cloakを非表示にすることでローディング時のチラツキを軽減できます