[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

v-if and v-show in the official documentationI hope this will be helpful for those who didn't quite understand the difference between

 

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, to indicate whether an element is shown or hidden.
Component A is embedded using the v-if directive (v-if="toggleA")
and component B is embedded using the v-show directive (v-show="toggleB").

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

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

This is what the official documentation says:

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

That's what it means

 

Going a little further

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

You'll notice that the created hook for component B (v-show) is executed as soon as you open the page.
Even if you repeatedly press button B and v-show changes from false -> true -> false -> true, the created hook will only be executed once because only the style changes.

Conversely, you'll notice that repeatedly pressing the A button will execute the created hook of the A component (v-if) multiple times.
When v-if switches from true to false, the DOM disappears, and when it switches back to true and reappears, the data is also initialized.

 

Different uses

`v-show` when you frequently need to switch between showing and hiding elements
, or when you need to retain data even when the element is hidden. Use `v-if` when you don't need to switch between showing and hiding elements often, or when you don't need to retain data when the element is 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