v-cloak的作用和原理

1、作用

v-cloak 指令常用在插值表达式的标签中，用于解决当网络加载很慢或者频繁渲染页面时，页面显示出源代码的情况。

所以为了提高用户的体验性，使用指令 v-cloak，搭配着 CSS 一起使用，在加载时隐藏挂载内容，等到加载完毕再显示渲染后的数据。

 

2、原理

先通过样式隐藏挂载内容，等到数据渲染完成后，v-cloak属性会自动去除，页面会显示最终效果。

3、v-cloak的使用

① 在插值语法所在的标签处加上v-cloak指令

<h1 v-cloak>{{ name }}</h1>

② 在 css 中设置 v-cloak 的属性为 display: none

<style type="text/css">[v-cloak] {display: none;}
</style>