[JavaScript知识库]VUE中的 v-if和v-show的区别

v-if: 能够控制是否生成虚拟节点，也就间接控制了是否生成对象的dom。当v-if为true时，会生成对应的虚拟节点，并生成对应的dom元素；当其为false时，不会生成对应的vnode，自然不会生成任何dom元素。

v-show: 始终会生成虚拟节点，也就间接导致了始终生成dom。它只是控制dom的display属性。当v-show为true时，不做任何处理；当其为false时，生成dom的display实现为none。

使用 v-if 可以有效的减少树的节点和渲染量，但也会导致树不稳定；而使用v-show可以保持树的稳定，但不能减少树的节点和渲染量。

因此，再实际开发中，显示状态变化频繁的情况下应该使用v-show，以保持树的稳定；显示状态变化少时应该使用v-if,以减少树的节点和渲染量。