[Vue.js] Difference between v-if and v-show, and how to use them

(This article was tested with Vue.js v2.5.13.)

I would like to write about the general differences and how to use the Vue.js conditional rendering directives v-if and v-show

I hope this will be read by those who have not yet fully understood the v-if vs v-show in the official documentation

 

The difference between v-if and v-show

Try it

To demonstrate this, we've created a JSFiddle

Also, please have the Developer Tools ready (you can open it by pressing F12 in Chrome, FireFox, or Edge)

To briefly explain the example, there are components A and B whose templates only have one p tag,

We are trying to toggle visibility using the v-if and v-show directives, respectively

The root object's data contains two Boolean variables, toggleA and toggleB, which indicate whether the component is visible or hidden.
The v-if directive (v-if="toggleA") is added to the embedded component A
and the v-show directive (v-show="toggleB") is added to the embedded component B.

For both toggleA and toggleB, clicking the corresponding button A or B will invert the truth value

Now, when you open the page, you will only see the A and B buttons for switching between boolean values.
However, in the DOM tree, the difference between v-if and v-show is already apparent when you open the page, and
while the DOM for component A does not exist, the DOM for component B exists with the display:none style applied.

This is what the official documentation says:

v-if is lazy: if it's false on initial display, it does nothing. The conditional block won't be rendered until the first time the condition becomes true.
v-show, on the other hand, is very simple: the element is always rendered regardless of the initial condition, and it saves on a simple CSS-based toggle.

That's what it means

 

Going a little further

Now let's see what happens when you repeatedly toggle the boolean values ​​of v-if and v-show.
Reload the page (or click RUN in the JsFiddle menu) and look at the Developer Tools console.

You can see that the created hook of component B (v-show) is executed when you open the page.
Even if you repeatedly press the B button and v-show changes from false to true to false to true, the created hook is only executed the first time because the style is only changing.

On the other hand, if you press the A button repeatedly, you will see that the created hook of the A component (v-if) is executed many times.
When v-if switches from true to false, the DOM disappears, and when it switches back to true and reappears, data is also initialized.

 

Different uses

to use v-show if the visibility is frequently switched or data needs to be retained even when hidden
, and v-if if the visibility is infrequent or data does not need to be retained when hidden.

The v-else directive can only be used with v-if, but it is not a good idea to use v-if just because you want to use v-else