v-if 和v-show的区别?在什么时候使用哪一个会比较好一些?

vue中 v-if 和v-show的区别?在什么时候使用哪一个会比较好一些?

实现本质方法区别
v-show本质就是标签display设置为none,控制隐藏
v-if是动态的向DOM树内添加或者删除DOM元素
编译的区别
v-show其实就是在控制css
v-if切换有一个局部编译/卸载的过程,切换过程中合适地销毁和重建内部的事件监听和子组件
编译的条件
v-show都会编译,初始值为false,只是将display设为none,但它也编译了
v-if初始值为false,就不会编译了
性能
v-show只编译一次,后面其实就是控制css
而v-if不停的销毁和创建,故v-show性能更好一点。
使用场景
v-show适合频繁切换
v-if适合运营条件不大可能改变

很多动态渲染的内容应该使用v-if,比方一些添加和编辑的弹窗内容需要做区分展示,按条件渲染对应元素或组件
v-show更多的是做简单的显隐,比方一个代表状态的元素,在组件内操作显隐即可
在实际的工作中,v-if用的更多

https://blog.csdn.net/wangningjing87/article/details/100985133

vshow相当于display:none,会渲染dom
v-if是不会渲染
v-if有更高的切换消耗;v-show有更高的初始渲染消耗;
如果需要频繁的切换,使用v-show比较好,如果运行条件很少改变,使用v-if比较好。

v-if操作的是dom元素的删除或显示
v-show操作的是css样式控制的显示隐藏
当然,要是频繁切换的话使用v-show性能更好