Vue的v-if与v-show的区别

Vue的v-if与v-show的区别

v-show和v-if都可以通过判断条件来决定页面的某个组件的是否在页面上显示，但它们在原理上却并不相同。了解它们的原理可以是我们写出更高质量的页面。

v-if

v-if是条件渲染语句，它是真正的条件渲染。根据if后面的条件来决定某个组件是否要渲染出来，它的渲染需要view model进行一系列的操作这也意味着使用v-if进行条件渲染的更改需要做多的事件，它需要操作dom而v-show不需要。

v-show

v-show本质上是通过display：none来实现组件的显示与消失的，也就是说这个组件本身是在html页面中的只是它的显示与否由条件决定。也就是说在加载整个页面时它也要将不显示的组件进行加载，而v-if则不需要。

总结

了解了它们的原理怎样使用它们就变得简单了。

• 当页面需要进行频繁切换时使用v-show比较合适，因为v-if需要频繁渲染要显示的组件，这工作量显然要比v-show要大的多，可能会导致页面卡顿。
• 当条件改变较少时使用v-if较好，可以少加载一些资源。