v-if 和 v-show 的区别

v-if 和 v-show 只有一个作用，就是根据指定的标识符，切换元素的显示和隐藏状态

那么这两者之间的区别在于哪里呢

<div id="app">
        {{flag}}
        <br>
        <input type="button" value="点击隐藏" @click="flag=!flag">
        <h2 v-if="flag">123</h2>
        <p v-show="flag">465</p>
    </div> 


</body>

<script src="./js/vue.js"></script>
<script>
    let vm = new Vue({
        el:'#app',
        data:{
            flag:true
        }
    })
</script>

我们创建一个按钮，通过改变条件的方法让元素显示或隐藏

当我们点击隐藏时，观察控制台：

 

 可以看到使用 v-if 控制的 h2 标签在控制台已经不存在了，

而使用 v-show 的 p 标签则是为元素添加了 display:none 来达到让元素 隐藏的效果

---

那么可以总结出下面两点：

v-if 是实时创建或移除元素，从而达到元素的显示或隐藏 

v-show 是通过为元素添加或移除 display:none 来实现显示和隐藏的

---

一般来说，v-if有更高的切换消耗而v-show 有更高的初始渲染消耗

因此，如果需要频繁的切换 v-show 使用体验较好 

如果在运行时不大可能改变，使用 v-if 较好