vue中v-if和v-show之间的区别

今天去面试被面试官问到了这个问题，所以在这里记录一下，以供大家参考。
首先，他们之间的共同点是都可以用于显示与隐藏之间的切换，但是v-if和v-show之间是有区别的：
实现方法的区别

• v-show实现方法就是标签属性display设置为none来达到隐藏的目的。
• v-if是动态向DOM树添加或删除DOM元素来达到隐藏的目的。

编译的区别

• v-show实际上就是在控制CSS
• v-if切换有一个局部编译/卸载的过程，在切换的过程中销毁或重建这个元素的内部监听事件和子组件

编译的条件

• v-show不管初始值为true还是false，它都会编译。当初始值为false的时候，只是将dispaly设为none，但是它还是编译了。
• v-if当初始值为false时，它不编译

性能
v-show只编译一次，后面要切换也只是控制CSS来切换；v-if需要频繁的操作DOM元素，需要不停的创建与销毁。故而，v-show的性能更好一点。

使用场景
v-show：需要频繁的切换页面显示与隐藏。
v-if：请求后台接口通过后台数据控制某块内容是否显示或隐藏，且这个数据在当前页不会被修改时。

希望这篇文章能够帮助到大家，同时也欢迎大家来交流技术

微信：hz1123448103