v-if和v-show

v-if和v-show的区别和使用场景

• v-if是通过控制DOM节点存在与否来控制节点的显示和隐藏的，v-show是通过设置DOM元素的display样式来控制元素的显示和隐藏的，如果显示display为block，隐藏display为none。
• v-if会确保在切换过程中条件块内的监听器和子组件会被适当的销毁和重建，和v-show则简单的多，只是简单的基于css切换。
• v-if是惰性的，如果初始条件为false时，则啥也不做，只有当条件为true时，才开始渲染条件块，而v-show不管在什么条件下都会渲染条件块，而且DOM元素会被保留在DOM树上。
• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。