解决vue 初始化页面闪动问题

使用 vue 开发时， 在 vue 初始化之前， 由于 div 是不归 vue 管的， 所以我们写的代码在还没有解析的情况下会容易出现花屏现象， 看到类似于{{message}}的字样， 虽然一般情况下这个时间很短暂， 但是还是有必要让解决这个问题的。

使用 v-cloak 指令

v-cloak 指令是 Vue 提供的一个指令，用于防止页面初始化时出现闪动问题。使用 v-cloak 指令时，需要在 CSS 中设置 v-cloak 的样式，使其在页面加载完成前隐藏相应的元素。当 Vue 加载完成后，v-cloak 指令会自动移除，从而显示相应的元素。下面是一个示例代码：

<div v-cloak>{{ message }}
</div>
<style>[v-cloak] {display: none;}
</style>

使用 v-if 指令

v-if 指令是 Vue 提供的一个指令，用于根据条件来渲染元素。当条件为 true 时，v-if 指令会渲染相应的元素；当条件为 false 时，v-if 指令会将相应的元素从 DOM 中移除。通过使用 v-if 指令，可以在数据加载完成后再渲染相应的元素，从而避免页面闪动问题。下面是一个示例代码：

<div v-if="isLoaded">{{ message }}
</div>

使用 v-show 指令

v-show 指令是 Vue 提供的一个指令，用于根据条件来显示或隐藏元素。当条件为 true 时，v-show 指令会显示相应的元素；当条件为 false 时，v-show 指令会隐藏相应的元素。通过使用 v-show 指令，可以在数据加载完成前先显示相应的元素，从而避免页面闪动问题。下面是一个示例代码：

<div v-show="isLoaded">{{ message }}
</div>

引用博主文章：https://blog.csdn.net/qq_37255976/article/details/136421703