Name the differences between v-show and v-if directives.

v-if conditionally renders an element, completely removing it from the DOM if the condition is false. v-show always renders the element but toggles its CSS display property between none and its original value based on the condition.

Differences in performance/use:

• v-if: More expensive initial rendering, but better performance when toggling infrequently, as elements are completely removed from the DOM.
• v-show: Lighter initial rendering, but better for elements that toggle frequently, as it only changes a CSS property.

Example usage:

<!-- Using v-if -->
<template>
  <div v-if="isVisible">
    This block is visible only if isVisible is true
  </div>

  <!-- Using v-show -->
  <div v-show="isVisible">
    This block is always in the DOM but visible only if isVisible is true
  </div>
</template>

<script>
export default {
  data() {
    return {
      isVisible: true
    };
  }
}
</script>