【Vue】v-if与v-show的区别及对应应用场景

1.控制手段不同

v-show 控制显示隐藏本质上是操作该元素的css--display:block/none，元素隐藏时依旧还在.

v-if        控制显示隐藏本质上是操作dom,动态的创建或者删除元素节点,值为false时即为在dom树上删除该元素节点

2.编译过程不同

v-if        切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

v-show 只是简单的基于 css 切换

3.编译条件不同

v-if       是真正的条件渲染，它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。只有渲染条件为假时，并不做操作，直到为真才渲染

4.性能消耗不同

v-if          有更高的切换消耗

v-show   有更高的初始渲染消耗；

总结: v-if本质其实是动态的创建 或者 删除元素节点。一般不用频繁切换显示或隐藏的情况, 会使用 v-if。因为v-if 是惰性的, 如果初始值为 false, 那么这些元素就直接不创建了, 这样就可以节省一些初始渲染开销。v-show本质是在控制元素的 css 样式,display: none/block;，一般元素需要频繁的切换显示隐藏, 用 v-show。因为v-if在频繁切换时会频繁的操作dom创建和删除元素, 消耗性能。