vue中v-cloak

vue渲染普通文本有两种方式，{ {}}和v-text：

<template>
    <div class="app">
        <div>{
    
    {
    
     text }}</div>
        <div v-text="text"></div>
    </div>
</template>
<script>
export default {
    
    
    name: '',
    components: {
    
    },
    data() {
    
    
        return {
    
    
            text: 'hi,我是文本!'
        }
    },

最后结果是：hi，我是文本！

在使用{ {}}展示或者是更新页面数据时，若网速较慢，可能会出现一个过渡现象，用户先看到表达式：如：{ {text}}，然后在看到data中的值(hi，我是文本！)，也就是闪烁问题。
解决闪烁问题，可以使用v-cloak指令，然后为其设置css样式为：display:none;

[v-cloak] {
    
    
    display: none;
}

有时添加后还是会出现闪烁问题，可能是v-cloak 的display属性被优先级别高的样式覆盖所导致，此时可以在添加一个!important

[v-cloak]{
    
    
            display: none !important;
        }

解释一下v-text和{ {}}的区别：
v-text会覆盖掉元素中原本的内容，{ {}}只会替换自己这个占位符；

<template>
    <div>
        <div>会被{
    
    {
    
     text }}覆盖吗</div>
        <div v-text="text">会被覆盖吗</div>
    </div>
</template>

输出结果为：

{ {}}、v-text与v-html的区别：
{ {}}和v-text向页面渲染普通文本，v-html向页面输出html。
v-html和v-text都会覆盖掉元素中原本的内容。