vue carrying instruction v-if the v-show both display and control instructions are hidden elements according to the conditions
Official website describes the differences:
v-if Is the "real" conditions rendering, because it will ensure that the event listener and sub-components within the conditional block is destroyed and rebuilt properly in the handover process.
v-if It is inert: If the condition is false at the time of the initial rendering, do nothing - until the condition becomes true when the first time, will begin to render conditional block.
In contrast, v-show it is much simpler - no matter what the initial conditions, the elements will always be rendered, and simply based on the CSS switch.
Generally, v-if a higher switching overhead, and v-show has a higher initial cost of rendering. Therefore, if the very frequently need to switch, is used v-show preferably; if conditions rarely changes during operation, is used v-if preferably.
think deeply:
v-if will ensure that the event listener, and conditional block subassembly is properly destroyed and rebuilt during the handover, this means that if a component by v-if controlling the display switching condition of each hide to display the time there will be a complete life cycle beforeCreate - created - beforeMount - mounted
v-show only the first load time will perform a complete life cycle, the hook function only when it is first loaded execution. After each switching state will not execute beforeCreate the life cycle of the mounted hooks