Vue: v-if 和 v-show的区别

v-if

当v-if的值为false时，网页中将不会对此元素进行渲染

<div id="app">
    <div v-if="isShow">DOM元素的样式绑定</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isShow:false
        }
    });
</script>

v-show

v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 是简单地切换元素的 CSS 属性 display 。

<div id="app">
    <div v-if="isShow">这里是v-if</div>
    <div v-show="isShow">这里是v-show</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            isShow:false
        }
    });
</script>

v-if 和v-show的区别：

相同点：v-show和v-if都能控制元素的显示和隐藏。

区别:

• v-show本质就是通过设置css中的display设置为none，控制隐藏而v-if是动态的向DOM树内部，添加和删除DOM元素

• 当条件是false时候，v-show也会编译，只是将其样式中的display设置成了none，而v-if就不会进行编译了。

• v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建

总结：如果要频繁切换某节点时，使用v-show（无论true或者false初始都会进行渲染，此后通过css来控制显示隐藏，因此切换开销比较小，初始开销较大），如果不需要频繁切换某节点时，使用v-if（因为懒加载，初始为false时，不会渲染，但是因为它是通过添加和删除dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）

当都为false的时候

从图中也可以清晰的看出，v-if是被直接注释掉了，直接就不进行编译，而v-show还是进行渲染，但是通过display：none将其隐藏起来了。