v-if和v-show的区别

他们的区别体现在三个方面:

1.原理:

从原理来看,v-if的原理是动态创建和销毁;v-show的原理是纯css样式的显示和隐藏

如果: v-if指令是从true -> false就销毁它; 如果值从false -> true 就创建它;

如果: v-show指令的值是从true -> false 就显示它 (display:none); 如果值从false ->true 就显示它 (display:block)

2.性能

从性能方面来看,v-if有更高的切换开销(销毁-重建) 而v-show 有更高级的初始渲染开销;无论值是true还是false它都会创建,而如果v-if的初始值为false,则不会创建.

如果需要非常频繁的切换,则使用v-show较好,如果在运行时条件很少改变,则使用v-if较好

3.场景

从场景上看,v-show 适合做纯页面的交互,例如抽屉菜单,折叠面板等,v-if适合结合v-else来根据不同的逻辑展示内容,例如用户登录之后根据权限不同来展示不同类型的头像图标.