v-show和v-if的区别主要有:
- 控制显示隐藏的本质不同:v-show控制显示隐藏的本质是操作该元素的css--display:block/none,元素隐藏时依旧还在;而v-if控制显示隐藏的本质是操作dom,动态的创建或者删除元素节点,值为false时即为在dom树上删除该元素节点。
- 编译过程不同:v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件;而v-show只是简单的基于css切换。
- 编译条件不同:v-if是真正的条件渲染,它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时不做操作,直到为真才渲染;而v-show都会编译,初始值为false,只是将display设为none,但它也编译了。
- 性能消耗不同:v-if有更高的切换消耗,更适合用于条件变化不大时使用;而v-show有更高的初始渲染消耗,适合于频繁的切换。
- 配套使用不同:v-if可以搭配template使用,而v-show不行。
综上所述,v-show和v-if的区别主要表现在控制显示隐藏的本质、编译过程、编译条件、性能消耗和配套使用上。