Q: What is the difference between v-if and v-show?
A: The destruction or reconstruction of the dom element actually operated by v-if will switch the bound event listener and some subcomponents; the operation of v-show is to switch the rendering of css, and the actual operation is the display attribute (none/block ); if you need to frequently switch the display of components, it is recommended to use v-show.
reference:
v-if is "true" conditional rendering, because it will ensure that event listeners and subcomponents inside the conditional block are destroyed and rebuilt appropriately during the switch, and the operation is actually the creation or destruction of dom elements.
v-show is much simpler, no matter what the initial condition is, the element will always be rendered, and it is simply toggled based on CSS, which operates the display:none/block property.
In general, v-if has higher switching overhead, while v-show has higher initial rendering overhead. So, if you need to switch very frequently, it's better to use v-show; if the conditions rarely change at runtime, it's better to use v-if.