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!

    60

    This website collects cookies to deliver better user experience

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