vue中v-if与v-show的区别

• 情景：有时候你可能会需要一个效果按条件时有时无
• vue提供v-if与v-else来实现这样的效果，以下是使用其的一部分代码

<template>
    <div @click="showT">
        <transition name="el-zoom-in-center">
            <div class="transition" v-if="show"></div>
           ／／或者<div class="transition" v-show="show"></div>
        </transition>
        <transition name="el-zoom-in-top">
            <div class="transition" v-if="show"></div>
        </transition>
        <transition name="el=zoom-in-bottom">
            <div class="transition" v-if="show"></div>
        </transition>
    </div>
</template>
<script>
    export default {
        data: () => ({
            show: true,
        }),
        methods: {
            showT() {
                this.show = !this.show
            }
        }
    }
</script>
<style>
    div {
      display: flex;  
    }
    .transition {
        width: 200px;
        height: 200px;
        background-color: #409EFF;
        margin-right: 20px;
    }
</style>

• 效果图v-if

 点击后会发现，上图中的蓝框消失，dom结构中的div也消失了

• v-show的效果图

 

点击之后的效果图，看到这里就会看到区别了

• 区别

v-show的元素会始终被渲染并保留在dom中，原理是每次改变其display的属性

v-show不支持template元素

v-if是惰性的，即如果初始条件是假，则什么也不做

 v-if会在切换过程中使组件被销毁和重建，所以v-if有更高的切换开销，但是v-show因为无论如何都会被渲染，所以初始渲染开销会更高，所以如果非常频繁的切换用v-show比较好，但是运行时条件很少被改变则使用v-if较好