vue页面加载闪烁的问题以及解决方案

一、原因：

问题：当我们打开Vue页面的时候，如果弱网环境，会出现一个闪烁的效果
下图：加载闪烁问题效果

原因：因为在浏览器中先执行html代码，先渲染Dom，然后再执行JavaScript代码，Vue还来不及处理的模板

二、解决：

在闪烁元素的最外层添加上一个v-cloak，并在css中添加样式：[v-cloak] {diaplay : none;}
v-cloak 这个指令可以隐藏未编译的Mustache标签，直到实例准备完毕。
原理：利用 v-cloak 这个指令使用 display:none 来进行隐藏

使用：直接在app这个写一个 v-cloak

借助一个CSS

[v-cloak]{

display:none

}

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>Document</title>

    <style>

        [v-cloak]{

            display: none;

        }

    </style>

  </head>

  <body>

    <div id="app" v-cloak>

        {{msg}}

    </div>

  </body>

  <script src="./js/vue.global.js"></script>

  <script>

    /*

            问题: 当我们打开Vue页面的时候,如果弱网环境,会出现一个闪烁的效果

            原因: Vue还来不及处理的模板

            解决: 使用 v-cloak 来解决Vue这个打开页面的闪烁的问题

            原理: 利用 v-cloak 这个指令使用 display:none 来进行隐藏

            使用: 直接在app这个写一个 v-cloak

                  借助一个CSS

                    [v-cloak]{

                        display:none

                    }

        */

// 使用一个定时器模拟效果

    setTimeout(() => {

      Vue.createApp({

        data() {

          return {

            msg:'hello world',

          };

        },

      }).mount("#app");

    },3000);

  </script>

</html>

巴特西

vue页面加载闪烁的问题以及解决方案

一、原因：

二、解决：

最新文章

热门文章