Vue 的 v-if 与 v-show 的区别

 v-if 与 v-show 的共同点

• v-if 与 v-show 都是动态显示DOM元素

区别：

• 1、编译过程：v-if 是 真正 的 条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-show的元素始终会被渲染并保留在 DOM 中。v-show只是简单地切换元素的 CSS 属性display。
• 2、编译条件：v-if 是惰性的：如果在初始渲染时条件为假，则什么也不做。直到条件第一次变为真时，才会开始渲染条件块。v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• 3、性能消耗：v-if有更高的切换消耗。v-show有更高的初始渲染消耗。
• 4、应用场景：v-if适合运行时条件很少改变时使用。v-show适合频繁切换。