Vue Academy #3: v-show VS v-if

Welcome to the new vue academy ! It will be a list of lot of article on vue! I have 2.5 years of experience in this and I can teach a few thing about this !

With vue you can use some directives, today we will check the difference between v-show & v-if !

Basic

Both directives serve to display or hide a component, depending on the condition given.

But what is the difference?

The main difference is the living behavior !

v-if

The element will be removed from the DOM, so it will have a new lifecyle hooks ! 🔂

You can also use v-else-if and v-else

v-show

The element will remain in the DOM, v-show will only use the display property CSS to the element ! 🎨

So the element is not destroyed, so it will no have a new lifecyle hook !

Example

Take this code as example 👇

Parent.vue

<template> <div> <button @click="changeState"> Switch state </button> <child v-show="isShowed" name="v-show" /> <child v-if="isLiving" name="v-if" /> </div> </template> <script> import Vue from "vue" import Child from "../child" export default Vue.extend({ components: { Child, }, data() { return { isShowed: false, isLiving: true, } }, methods: { changeState() { this.isShowed = !this.isShowed this.isLiving = !this.isLiving }, } }) </script> 

Child.vue

<template> <div> Hello from {{ name }} </div> </template> <script> import Vue from "vue" export default Vue.extend({ props: { name: String, }, created() { console.log(`Element named ${ this.name } is created`) }, destroyed() { console.log(`Element named ${ this.name } is destroyed`) }, }) </script> 

At init we have this console log :

Element named v-show is created
Element named v-if is created

When we change the state in order to activate directive :

Element named v-if is destroyed
Element named v-if is created
Element named v-if is destroyed
Element named v-if is created

Only v-if component is reload and have a new cyclehook !

As mentioned above, we can check the display property for v-show component when component is hiding

<div style="display: none;"> Hello from v-show </div> 

Conclusion

Both is used to hide component, but the difference is the way of hiding this component !

v-if

• Element is removed from the DOM
• Element will have a new lifecyle hook

• Can be use with v-else-if and v-else

• Init load component is cheap

• Toggle element is expensive

v-show

• Element remains in the DOM
• Element will not have a new lifecyle hook

• Element will have display: none when set to false

• Init load component is expensive

• Toggle element is very cheap

I hope you like this reading!

🎁 You can get my new book Underrated skills in javascript, make the difference for FREE if you follow me on Twitter and MP me 😁

Or get it HERE

🎁 MY NEWSLETTER

☕️ You can SUPPORT MY WORKS 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : https://twitter.com/code__oz

👨‍💻 Github: https://github.com/Code-Oz

And you can mark 🔖 this article!