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!