Vue.js 中的v-cloak指令【笔记】-CSDN博客

本文链接：https://blog.csdn.net/weixin_44296929/article/details/106517302

本文详细介绍了Vue.js中v-cloak指令的用途及其实现原理，解释了如何使用v-cloak来解决页面加载时的闪烁问题，并提供了具体的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前几天使用Vue.js的时候，偶然的看到v-cloak，于是查了一下，v-cloak非常简单实用的一个指令，记录一下方便自己回头看。

1、可以使用v-cloak指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移除。
当网络较慢时，网页还在加载Vue.js，而导致Vue来不及渲染，这时页面就会显示出Vue源代码。我们可以使用v-cloak指令来解决这一问题。参考文章

HTML：

<div id="app">
    {{context}}
</div>

JS：

<script>
    var app = new Vue({
        el: '#app',
        data: {
            context:'互联网头部玩家钟爱的健身项目'
        }
    });
</script>

效果：
在这里插入图片描述
这时我们可以使用v-cloak来解决问题。

JS不变，在DIV中加入v-cloak指令。

HTML：

<div id="app" v-cloak>
    {{context}}
</div>

CSS：

[v-cloak]{
    display: none;
}

使用v-cloak指令之后的效果：
在这里插入图片描述
在简单的项目中，使用v-cloak指令是解决屏幕闪动的好方法，但在大型、工程化的项目中（webpack、vue-ruoter）只有一个空的div元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到v-cloak指令咯。

2、v-cloak的注意事项：参考文章

a、v-cloak的作用和用法：

这个指令保持在元素上直到关联实例结束编译。和css规则如[v-cloak]{ display:none }一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。

Vue1中，允许将Vue实例挂载在body上，而Vue2是不允许的，想对整个页面实例化，需要另外用一个p来容纳整个页面内容，对其进行实例化，这样在使用v-cloak时，同样需要用到这种方法。

b、为什么我用的v-cloak无效？

在实际项目中，我们通常使用@import来加载css文件

@import "style.css"
@import "index.css"

为了避免这种情况，我们可以将v-cloak写在link引入的css中，或者写一个内联css样式，这样就得到了解决。而@import是在页面DOM完全载入后才会进行加载，如果我们将v-cloak写在@import加载的css文件中，就会导致页面仍旧闪烁。