v-if and v-show

Vue Directives: v-if and v-show

Both v-if and v-show are used to conditionally render elements in Vue.js, but they differ significantly in how they achieve this, impacting performance characteristics.

v-if

• How it works: v-if truly removes or adds the element to the DOM based on the truthiness of the expression provided. When the condition is false, the element is completely absent from the DOM.

• Performance: More performant when the condition rarely changes. Removing and adding elements to the DOM is expensive, but if the condition is stable, this cost is incurred infrequently.

• Use Cases:

  • Rendering different components based on user roles.
  • Showing/hiding sections of a page that are rarely toggled.
  • Preventing expensive component initialization when not needed.

• Example:

  <template>
    <div>
      <button @click="toggle">Toggle</button>
      <div v-if="isVisible">
        This content is conditionally rendered using v-if.
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isVisible: false
      }
    },
    methods: {
      toggle() {
        this.isVisible = !this.isVisible;
      }
    }
  }
  </script>
  

  In this example, the div is only added to the DOM when isVisible is true. When isVisible is false, the div doesn't exist in the DOM at all.

• v-else and v-else-if: Can be used in conjunction with v-if to create conditional blocks.

  <template>
    <div>
      <button @click="changeType">Change Type</button>
      <div v-if="type === 'A'">
        Type A content.
      </div>
      <div v-else-if="type === 'B'">
        Type B content.
      </div>
      <div v-else>
        Default content.
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        type: 'C'
      }
    },
    methods: {
      changeType() {
        this.type = (this.type === 'A') ? 'B' : 'A';
      }
    }
  }
  </script>
  

v-show

• How it works: v-show doesn't remove the element from the DOM. Instead, it toggles the display CSS property between none and its original value. The element is always present in the DOM, even when it's not visible.

• Performance: More performant when the condition frequently changes. Toggling the display property is a relatively inexpensive operation compared to DOM manipulation.

• Use Cases:

  • Toggling visibility based on user interaction (e.g., a modal window).
  • Animations that rely on the element being present in the DOM.
  • Frequently switching between visible and hidden states.

• Example:

  <template>
    <div>
      <button @click="toggle">Toggle</button>
      <div v-show="isVisible">
        This content is conditionally rendered using v-show.
      </div>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        isVisible: false
      }
    },
    methods: {
      toggle() {
        this.isVisible = !this.isVisible;
      }
    }
  }
  </script>
  

  In this example, the div is always present in the DOM. When isVisible is false, the div has display: none; applied to it, making it invisible. When isVisible is true, the div is visible.

Summary Table

Choosing Between v-if and v-show

• If the element is rarely shown/hidden: Use v-if.
• If the element is frequently shown/hidden: Use v-show.
• If you need to prevent component initialization: Use v-if.
• If you need to animate the element's appearance/disappearance: Use v-show. (Because v-if removes the element, you can't animate its transition.)