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

1.共同点：都能控制元素的显示和隐藏。

2.不同点：实现本质⽅法不同，v-show本质就是通过控制css中的display设置为none，控制隐藏，只会编译⼀次；v-if是动态的向DOM树内添加或者删除DOM元素，若初始值为false，就不会编译了。⽽且v-if不停的销毁和创建⽐较消耗性能。

3.总结：如果要频繁切换某节点，使⽤v-show(切换开销⽐较⼩，初始开销较⼤)。如果不需要频繁切换某节点使⽤v-if（初始渲染开销较⼩，切换开销⽐较⼤）。

v-if 使用：

<div v-if="show"> v-if </div>
 
 <div v-else> v-else </div>
 data () {
        return {
            show:false,
            
        }
    },

v-show 使用：

<div  v-show="show">v-show</div>
// true 显示  false 隐藏
 data () {
        return {
            show:false,
        }
    },