What are the differences between v-show and v-if in vuejs

This article mainly introduces the difference between v-show and v-if in vuejs, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, let the editor take you to understand it.

Differences: 1, "v-if" is to dynamically add or delete DOM elements to the DOM tree, "v-show" is to set the display style attributes of DOM elements to control the display and concealment; 2, the compilation process is different; 3, the compilation conditions are different; 4, the switching consumption of "v-if" is high, the initial rendering consumption of "v-show" is high, and so on.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

The difference between v-if and v-show

Both v-if instruction and v-show instruction can dynamically control the hiding of DOM elements according to the value. V-if and v-show are commonly used internal instructions of Vue. The duty of the instruction is to apply some special behavior to DOM when the value of the expression changes.

Description

V-if

The v-if instruction is used to conditionally render a piece of content that is rendered only when the instruction expression returns a truth value.

Showhide

V-show

The v-show instruction is used in much the same way, except that elements with the v-show instruction are always rendered and retained in the DOM, and v-show simply switches the CSS property display of the element.

Show

Difference

Implementation: v-if dynamically adds or removes DOM elements to the DOM tree, and v-show controls display and concealment by setting the display style attribute of the DOM element.

Compilation process: v-if switching has a process of partial compilation and unloading, during which the internal event listeners and subcomponents are properly destroyed and rebuilt. V-show is simply based on CSS switching.

Compilation condition: v-if is lazy, if the initial condition is false, nothing is done, partial compilation starts only when the condition becomes true for the first time, v-show is compiled under any condition, then cached, and the DOM element is retained.

Performance consumption: v-if has higher switching costs and v-show has higher initial rendering costs.

Usage scenarios: v-if is suitable for situations where conditions are unlikely to change, and v-show is suitable for situations where conditions are switched frequently.

Thank you for reading this article carefully. I hope the article "what is the difference between v-show and v-if in vuejs" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!