The introduction

V-if, v-show is a command we use quite frequently in VUE. Do you really understand this problem?

When I received this question, the first thing that came to my mind as a front-end geek was:

  • V-if: Elements are rendered only if the value is true
  • V-show: Elements are always rendered regardless of the value true or false
  • The performance of v-show is higher in scenarios requiring frequent switching

Some of the answers we often see on the Internet are also like this. Let’s take a look at the Vue website.Vue official website: V-IF VS V-show It says that v-if is lazy, v-show is the element that will be displayed after rendering according to CSS.

V-if is “true” conditional rendering, so how does Vue toggle whether elements within a V-if conditional block are displayed or not?

How does V-show switch display based on CSS?

v-if

Let’s write the following V-if conditional block in vueDemo

<div class="if" v-if="false">v-if</div>
Copy the code

We can see that setting v-if=false creates a comment node (placeholder node) in the current template, and only creates a real node when v-if is true. It involves the diff algorithm of the virtual DOM of Vue. If you don’t know much about it, you can read this article in great detail so that virtual DOM and DOM-Diff don’t become a stumbling block for you

The comment/placeholder node here is used to identify the location of the element on the page so that it can be rendered directly at that location during patch in the diff.

v-show

Let’s also write the following V-show conditional block in vueDemo

<div class="show" v-show="true">v-show</div>
<div class="show" v-show="false">v-show</div>
Copy the code

As you can see, when we set v-show to false, we set the conditional block element todisplay:none;As vUE website says, passSets whether CSS toggle elements are displayed.

So we know that there are three ways to toggle elements by setting CSS

  1. visibility:hidden;
  2. display:none;
  3. overflow:hidden;

By comparison, it is obvious that overflow 3 does not fit the usage conditions here, but why use display:none; ?

display:none; VS visibility:hidden;

For this reason why display: None; Rather than the visibility: hidden; Let’s take a look at the description of these two attributes, MDN.

In a nutshell

  • display:none; The element will be removed from the DOM tree, and none of its children will be displayed, so we can’t do events or DOM manipulation here.
  • visibility:hidden; The elements will be hidden and will remain in their original positions, the overall layout will not change, we can manipulate the DOM, and the child elements will still be visible.

I’m actually a little confused by this, because V-show is good for frequent switching, but using display: None here causes backflow problems.

In fact, if V-show uses visibility:hidden; If the element becomes transparent, it will remain in its original position. Here the v-show application scenario cannot occupy the original position, so we use display:none;

conclusion

When the v-if value is false, a comment node is created at that location to identify the element’s position on the page. When the value changes, the old and new components are patched through diff to dynamically show and hide.

If the value of v-show is false, it controls whether the element is displayed by setting the CSS of the element, display: None.

For an attribute command, we should try to understand how it works. Why do we do this? What’s the good of that? Is there a better way to do it?

conclusion

Front end small white, record some of their own learning experience, if there is wrong place I hope you can correct, in the comments section of the message discussion. Thank you!