【vue】v-if 与 v-show的区别？

共同点： 控制元素的显示与隐藏
不同点：

• v-if 是动态的向DOM树里面添加或者删除元素；v-show 是通过给元素添加或者删除style=“display：none；”(行内样式）来控制显示与隐藏。如果该元素本身样式含有 display：none；那么 是无法通过切换值进行元素的显示 。
• v-if 切换有一个局部编译/卸载的过程，切换过程中会销毁和重建内部的事件监听和子组件；v-show只是简单的行内样式切换，只编译一次。故v-show 性能更好。

用法：

• 如果要频繁切换显示与隐藏时，使用 v-show（无论 true 或者 false 初始都会进行渲染，此后通过 css 来控制显示隐藏，因此切换开销比较小，初始开销较大）
• 如果不需要频繁切换某节点时，使用 v-if（因为懒加载，初始为 false时，不会渲染，但是因为它是通过添加和删除 dom元素来控制显示和隐藏的，因此初始渲染开销较小，切换开销比较大）