今天去面试被面试官问到了这个问题,所以在这里记录一下,以供大家参考。
首先,他们之间的共同点是都可以用于显示与隐藏之间的切换,但是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