vue v-if和v-show的区别（vue中v-if和v-show的区别和使用）

vue v-if和v-show的区别（vue中v-if和v-show的区别和使用）弄懂原理以后其实就明白了 为什么 v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。学习源码是一个枯燥的过程，但是如果能够坚持，一定会有收获。<div v-show="show">显示/隐藏</div> // true 显示 false 隐藏 data () { return { show:false } }使用场景从上面我们可以知道v-if的显示隐藏会导致dom元素整个添加或删除，会影响到组件的销毁和重建，所以v-if会有更高的资源切换消耗；v-show仅仅第一次的时候加载一次组件，切换过程仅仅只是控制组件的显示隐藏，那么第一次的时候会有更高的初始渲染消耗，而后面的切换会大量的减少资源的消耗；所以v-if适合组件的显示隐藏的切换不会频繁切换的场景；而v-show适合组件的显示隐藏频繁切换的场景。

在我们实际vue的页面中经常会有隐藏显示某一部分界面或者弹框等情况，那么这个时候我们就经常用到v-if或者v-show来控制界面的显示隐藏了。

两者的共同点

刚才我们提到两者都可以用于控制界面的显示隐藏，那么共同点我们是当两者的值为false的时候，会隐藏界面同时不会占据页面空间位置，如果值为true的时候，会显示界面同时占据页面空间位置。

两者的不同点

1、v-if 控制显示隐藏实际上是控制dom元素整个添加或删除，在切换过程中条件块内的事件监听器和子组件会被销毁和重建；也是惰性的：即值为false条件为假时，什么也不做，不会渲染条件块，直到条件第一次变为真时，这时才会真正创建渲染条件块。

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

2、v-show 一开始就会渲染dom元素，根据v-show的值进行显示和隐藏，其实v-show隐藏元素实际上是为该元素添加css--display:none，dom元素还在，只是不显示而已。如果当前元素存在频繁切换的操作，建议用v-show实现。如下图：

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

使用场景

从上面我们可以知道v-if的显示隐藏会导致dom元素整个添加或删除，会影响到组件的销毁和重建，所以v-if会有更高的资源切换消耗；

v-show仅仅第一次的时候加载一次组件，切换过程仅仅只是控制组件的显示隐藏，那么第一次的时候会有更高的初始渲染消耗，而后面的切换会大量的减少资源的消耗；

所以v-if适合组件的显示隐藏的切换不会频繁切换的场景；而v-show适合组件的显示隐藏频繁切换的场景。

总结

弄懂原理以后其实就明白了 为什么 v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。学习源码是一个枯燥的过程，但是如果能够坚持，一定会有收获。