[Vue.js] Differences between v-if and v-show, points on how to use them properly

(In this article, operation was confirmed with Vue.js v2.5.13.)

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

the official document v-if vs v-show and still don't get the hang of it will read this.

 

Difference between v-if and v-show

Try using it

I have created a JSFiddle to show you an example of usage, please take a look.

Also, please prepare Developer Tools. (If you are using Chrome, FireFox, or Edge, press F12 to open)

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

I am trying to switch display/hide using the v-if and v-show directives, respectively.

The data of the root object has two Boolean variables toggleA and toggleB that indicate display/hide, and
to embed component A, use the v-if directive (v-if="toggleA")
to embed component B. adds the v-show directive (v-show="toggleB").

For both toggleA and toggleB, when you click the corresponding button A or B, the truth value is reversed.

Now, when you open the page, I think only the A and B buttons for switching between true and false values ​​are displayed.
However, on the DOM tree, the difference between v-if and v-show is already visible when the page is opened, and
the DOM of component A does not exist, but the DOM of component B has the display:none style applied. It exists in a state where

This is what the official documentation says:

v-if is lazy drawing. If it is false in the initial display, nothing will be done. A conditional block is not drawn until the condition first becomes true.
On the other hand, v-show is very simple. Elements are always drawn regardless of initial conditions and saved as simple CSS-based toggles.

is what it means.

 

Let's go a little deeper

From here, we will see what happens when we repeatedly invert the truth values ​​of v-if and v-show.
Reload the page once (or press RUN on the JsFiddle menu) and take a 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 press the B button repeatedly and the v-show changes repeatedly from false -> true -> false -> true, the created hook will only be executed once because the style only changes.

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

 

Proper use

Use v-show if you frequently switch between display/hide or need to retain data even when hidden;
v- if you switch infrequently or do not need to retain data when hidden. It is a good idea to use if as your basic policy.

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