In the Vue command, v-show is different from v-if

v-show

V-show simply switches between display: None and display: block.

Whatever the initial conditions are will be rendered, and the DOM will still be there if you just switch the CSS or switch the judgment conditions.

v-if

V -if is used to talk about Vue low-level compilation. When v-if is false, the component or DOM element is not rendered, that is, the component or DOM element is not created at all.

It will not be created until the condition is true;

When the judgment condition is switched, the destruction/mounting component will be triggered, so the cost of V-IF will be relatively high during the switching.

The v-IF based lazy rendering mechanism allows components to be rendered only when necessary, reducing the initial rendering overhead of the entire page.

conclusion

Taken together, V-show has a higher initial rendering overhead, but has a low switching overhead and is better suited for frequently switched scenes;

V-if has low initial overhead and can create components or DOM elements only when needed. However, v-IF has high overhead when switching and is more suitable for scenarios that do not switch frequently.