How to use v-show to reuse DOM in vue

Editor to share with you how to use v-show to reuse DOM in vue, I believe most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

Reuse DOM with v-show

V-show: is the rendering component, and then changes the display of the component to block or none v-if: rendering or non-rendering component

So for scenarios where conditions can be changed frequently, use v-show to save performance, especially the more complex the DOM structure, the greater the benefits.

However, it also has a disadvantage, that is, at the beginning of v-show, all the components within the branch will be rendered and the corresponding lifecycle hook functions will be executed, while v-if will only load the components that are hit by the judgment condition, so you need to use appropriate instructions according to different scenarios.

For example, the following uses v-show to reuse DOM, which is better than v-if/v-else

The principle is to use v-if to trigger diff updates when conditions change, and find that the new and old vnode are inconsistent, then remove the entire old vnode, recreate a new vnode, then create a new my-components component, and then go through the process of initialization and render,patch of the component itself, while v-show when the conditions change, the new and old vnode are consistent, so a series of processes such as removal and creation will not be performed.

The above is all the content of the article "how to reuse DOM with 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!