What is the difference between v-if and v-show in vue? Summary of the differences between v-if and v-show

What this article brings to you is about the difference between v-if and v-show in vue? A summary of the differences between v-if and v-show has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

v-if dynamically adds or deletes DOM elements to the DOM tree; v-show controls the visibility by setting the display style attribute of the DOM element;

v-if switch has a The process of partial compilation/uninstallation, properly destroying and rebuilding internal event listeners and subcomponents during the switching process; v-show is simply switching based on css;

v-if is lazy, if the initial condition is false , do nothing; local compilation only starts when the condition becomes true for the first time (is the compilation cached? After the compilation is cached, partial unloading is performed when switching); v-show is under any condition ( Whether the condition is true for the first time) are compiled, then cached, and the DOM elements are retained;

v-if has a higher switching cost; v-show has a higher initial rendering cost;

v-if is suitable for operating conditions that are unlikely to change; v-show is suitable for frequent switching.

so, generally, v-if has higher switching cost, while v-show has more initial rendering cost.

So, if frequent switching is required without security requirements, use v-show. If the condition is unlikely to change at runtime, v-if is better.

Related recommendations:

A brief introduction to global registration and local registration in vue.js components and example analysis

Instances of VUE components ：How to implement countdown in VUE component?

The implementation principle of scoped in Vue and the usage of scoped penetration (with code)

What is vue virtual DOM? Usage of vue's virtual DOM

The above is the detailed content of What is the difference between v-if and v-show in vue? Summary of the differences between v-if and v-show. For more information, please follow other related articles on the PHP Chinese website!