directory
The difference between
Usage scenarios
conclusion
The difference between
- 1. Means: V-if controls the explicit and implicit elements by controlling the presence or absence of DOM nodes; V-show sets the DOM element’s display style, block to show, and None to hide.
- 2. Compilation process: V-IF switching has a partial compile/uninstall process, during which internal event listeners and subcomponents are destroyed and rebuilt appropriately; V-show is simply a CSS-BASED switch;
- Compile condition: v-if is lazy, if the initial condition is false, do nothing; Local compilation starts only when the condition is true for the first time. The compile is cached and then partially unloaded when switching); V-show is compiled under any condition (whether the first condition is true or not), then cached, and DOM elements are preserved;
- 4. Performance consumption: V-IF has higher switching consumption; V-show has a higher initial render cost;
Usage scenarios
Based on the above differences, v-show is better if you need to switch very frequently; It is better to use V-if if conditions rarely change at run time.
conclusion
V-if determines whether to load, which can reduce the pressure on the server and load when needed, but has higher switching overhead; V-show tweaks the CSS dispaly properties of DOM elements to make client operations smoother, but with higher initial rendering overhead. If you need to switch very frequently, use V-show. It is better to use V-if if conditions rarely change at run time.
reference