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较好,可以少加载一些资源。