Why conditional rendering matters in Vue - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What will this Vue component display initially?

Consider this Vue component using conditional rendering with @if. What text will appear when the component first renders?

Vue

<template>
  <div>
    <p @if="showMessage">Hello, Vue learner!</p>
    <button @click="showMessage = !showMessage">Toggle Message</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showMessage = ref(false)
</script>

A An error occurs because @if is not valid syntax.

B The text 'Hello, Vue learner!' is visible.

C No text is visible initially.

D The button text 'Toggle Message' is hidden.

💡 Hint

Think about the initial value of showMessage and how @if controls rendering.

The showMessage variable starts as false. The @if directive only shows the paragraph if showMessage is true. So initially, the paragraph is not rendered, and no text appears.

❓ state_output

intermediate

What is the value of count after clicking the button twice?

This Vue component toggles a message and increments a count only when the message is shown. What is the value of count after clicking the button two times?

Vue

<template>
  <div>
    <p @if="show">Message shown</p>
    <button @click="toggle">Toggle</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
const count = ref(0)

function toggle() {
  show.value = !show.value
  if (show.value) {
    count.value++
  }
}
</script>

A 3

B 0

C 2

D 1

💡 Hint

Count increments only when the message becomes visible.

Initially, show is false and count is 0. Clicking once sets show to true and increments count to 1. Clicking again sets show to false, so count stays 1.

📝 Syntax

advanced

Which option correctly uses Vue's conditional rendering syntax?

Vue 3.4+ introduced new control flow directives. Which of these options correctly shows a paragraph only if isVisible is true?

A <p v-show="isVisible">Visible</p>

B <p @if="isVisible">Visible</p>

C <p v-if="isVisible">Visible</p>

D <p :if="isVisible">Visible</p>

💡 Hint

Vue 3.4+ uses @if as a new control flow directive replacing v-if.

In Vue 3.4+, the new @if directive is the correct way to conditionally render elements. v-if and v-show are older syntax. :if is invalid.

🔧 Debug

advanced

Why does this Vue component fail to toggle the message?

Look at this Vue component. Clicking the button does not show or hide the message. What is the cause?

Vue

<template>
  <div>
    <p @if="showMessage">Hello!</p>
    <button @click="toggleMessage">Toggle</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const showMessage = ref(false)

function toggleMessage() {
  showMessage = !showMessage
}
</script>

A The toggleMessage function incorrectly reassigns the ref variable instead of its value.

B The @if directive is not supported in Vue 3.4+.

C The button click event is missing parentheses.

D The showMessage variable is not declared.

💡 Hint

Remember how to update a ref value in Vue.

In Vue, ref variables are objects with a .value property. The code tries to reassign the entire ref instead of toggling showMessage.value. This causes the toggle to fail.

🧠 Conceptual

expert

Why is conditional rendering important for performance in Vue?

Which statement best explains why conditional rendering matters in Vue applications?

A It prevents unnecessary elements from being created and updated, saving browser resources and improving speed.

B It automatically caches all components to avoid re-rendering.

C It forces Vue to render all elements at once for consistency.

D It disables reactivity to improve performance.

💡 Hint

Think about how rendering fewer elements affects browser work.

Conditional rendering lets Vue skip creating or updating parts of the page that are not needed. This reduces CPU and memory use, making the app faster and smoother.