Vue Academy #3: v-show VS v-if
Tags: vue, javascript, webdev, typescript
Published: 2021-07-24 13:10:22

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**

```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**

```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

```html
<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](https://twitter.com/code__oz) and MP me 😁

Or get it [HERE](https://codeoz.gumroad.com/l/RXLYp)

🎁 [MY NEWSLETTER](https://www.getrevue.co/profile/code__oz)

☕️ You can [SUPPORT MY WORKS](https://www.buymeacoffee.com/CodeoZ) 🙏

🏃‍♂️ You can follow me on 👇

🕊 Twitter : [https://twitter.com/code__oz](https://twitter.com/code__oz)

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

And you can mark 🔖 this article!