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

发布:admin2026-06-19 17:22:55 8630条浏览分类:星火论坛

一、原因:

问题:当我们打开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

}

Document

{{msg}}