v-if 与 v-show 的区别？

实现显示隐藏的方式不同

• v-if 显示隐藏是将 dom 元素整个添加或删除
• v-show 显示隐藏则是在该元素的 行内 css 样式中 对 display 属性值的切换操作,即：当 v-show 的值为 false 时，设置 display:none;当 v-show 的值为 true 时，将 display 的属性值设置为空或者初始值（本身已经设置过的display属性值）

编译的条件不同

• v-if:惰性的，只有在条件为真时，才开始编译，否则，什么也不会做
• v-show:在任何条件下都会被编译

当一个元素本身已经设置了 display:none 时，通过 v-show 修改为 true 是无法让元素显示的。原因是 v-show 的显示隐藏切换，是通过是否设置 display:none 来实现。而当v-show为true时，由于原始的display的值为none ，因此，设置行内样式时，display设置为空，不会覆盖初始设置的样式

出于性能考虑，应避免将 v-if 与 v-for 应用于同一标签 ---- v-for比v-if的优先级要高，结合两者编译的问题，应该先在父元素中使用v-if，再在子元素使用v-for