vue v-cloak妙用 白屏 花屏

Vue 在初始化时,由于 DOM 元素不归 Vue 管理,导致我们在代码中写的模板在未被 Vue 解析之前可能会直接显示在页面上。

这会造成短暂的花屏现象,使得用户可能会看到{{message}}这样的原始模板代码。

虽然这种情况下的显示时间通常非常短暂,但为了优化用户体验,我们还是应该解决这个问题。

解决方法如下:

1. 在 CSS 中添加以下样式,该样式会隐藏带有 v-cloak 指令的元素:

[v-cloak] {
  display: none;
}

2. 在需要避免花屏的元素上添加 v-cloak 指令:

<div v-cloak></div>
这样,在 Vue 实例化并完成模板编译之前,这个元素会一直保持隐藏状态。

3. 如果上述方法还不能彻底解决问题,可以考虑在 Vue 的根元素上使用以下方法:

<div style="display: none;" :style="{display: 'block'}"></div>

这样,根元素在初始化时默认是隐藏的,待 Vue 完成初始化后,通过绑定的样式将其显示出来。 通过上述方法,我们可以有效地解决 Vue 初始化过程中的花屏问题,提升应用的用户体验。

posted on 2021-08-27 21:15  完美前端  阅读(260)  评论(0)    收藏  举报

导航