v-cloak和v-once的用法

1.v-cloak

问题:在使用vue绑定数据的时候，渲染页面有时会出现变量闪烁，例如

<div id="app">
    <p>{
   
   {message}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            message: '我是data中message的数据'
        }
    });
</script>

效果: 在页面加载时,有时会在页面中看到这个:

{
   
   {message}}

解决方案: 使用v-cloak

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

注意:要在css代码部分写如下代码

[v-cloak] {
    display: none;
}

这样:就可以防止也页面闪烁

2.v-once

解决的问题:只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点

，都会当作静态内容并跳过，这可以用于优化更新性能。

<div id="app">
    <p v-once>{
   
   {message}}</p>
    <input type="text" v-model="message">
</div>
<script src="./vue.js"></script>
<script>
new Vue({
    el: '#app',
    data: {
        message: '我是data中message的属性的值'
        }
    });
</script>

当添加v-once的指令所对应的元素, 其数据发生改变时,并不会再一次进行渲染

v-cloak和v-once 不需要表达式, 直接将指令写在开始标签中即可