Shulou(Shulou.com)06/02 Report--

Editor to share with you what is the difference between v-if and v-show in vue, I believe most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!

Differences: 1, "v-if" is based on the judgment conditions to dynamically add and delete DOM elements, "v-show" is based on the judgment conditions to dynamically show and hide elements; 2, "v-if" switch consumption is high, "v-show" initial rendering consumption is high; 3, "v-show" performance is higher than "v-if" 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 is the basic knowledge often asked in the front-end interview. V-if and v-show are used to judge the display effect of the view layer. So how to show it exactly? What is the difference between v-if and v-show?

First of all, let's take a look at the introduction of the Vue Chinese community documentation:

In the Vue Chinese community description document, it is simply: the condition judgment display is performed during the initial rendering.

In actual development, we often use v-if and v-show to judge and display. We can understand it like this:

In the above example, the role of v-if is through whether pload and list.length

Using v-if, we can notice that the browser does not render the div where the element class is tc, because the browser will generate a tag and render in browsing only if the v-if condition is true, and if the condition is false, the browser will not generate a tag, let alone render.

Then we can think about it: when the condition is false, the browser does not generate tags and does not render, and the browser only renders when the condition is true. Does this consume a lot of page performance?

What if our judgment condition is not only one scenario, but multiple scenarios? So what do we do now? Vue provides us with v-else instructions. V-else is the exclusive instruction of v-if. V-else can only be used with v-if.

If we use v-show to judge rendering, the div tag and the img in it will be generated and rendered, but we notice that the browser adds the display:none attribute to our inline style, so in essence, the v-show tag exists, but the browser helps us hide it.

In fact, the browser only changes the inline style according to the judgment condition, and when the condition is true, the inline style is changed to display:none when the display:block; condition is false.

V-show actually has better performance than v-if, because v-show only dynamically changes styles and does not need to add or delete DOM elements, but v-show cannot be used with v-else when branch judgment is encountered in many cases. The way to use v-show in this scenario is to re-use v-show to write other logical judgments.

Summary of differences:

1. The principle of v-if is to dynamically add and delete DOM elements according to the judgment conditions, and v-show dynamically displays and hides elements according to the judgment conditions. Frequent addition and deletion of DOM operations will affect the page loading speed and performance, so we can draw a conclusion:

When your project program is not very large, both v-if and v-show can be used to judge, show and hide (the use of v-if in this scenario has little impact, not no impact).

When your project program is relatively large, it is not recommended to use v-if to judge, show and hide. It is recommended to use v-show.

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

3. V-if is lazy. If the initial condition is false, nothing will be done. Only when the condition becomes true for the first time will partial compilation be started. Compilation is cached and then partially unloaded when switching); v-show is compiled under any condition (whether the first condition is true or not), then cached, and the DOM element is retained

4. V-if has higher switching consumption; v-show has higher initial rendering consumption.

If you need frequent switching, it is better to use v-show, and if the operating conditions rarely change, it is better to use v-if.

5. V-show has higher performance than v-if.

Because v-show can only change styles dynamically, there is no need to add or delete DOM elements. So when the program is not very big, there is little difference between v-if and v-show, if the project is very large, it is recommended to use more v-show, less browser later operation performance.

6. V-if is suitable for operating conditions and is unlikely to change; v-show is suitable for frequent switching.

The above is all the content of this article entitled "what's the difference between v-if and v-show in vue". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.