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都会覆盖掉元素中原本的内容。