Dynamic render patterns in Vue - Step-by-Step Execution

Concept Flow - Dynamic render patterns

Start Component Setup

↓

Define reactive state

↓

Template uses dynamic rendering

↓

User interaction or state change

↓

Update reactive state

↓

Vue reactivity triggers re-render

↓

DOM updates with new content

↓

Wait for next interaction or state change

This flow shows how Vue dynamically renders content by reacting to state changes and updating the DOM accordingly.

Execution Sample

Vue

import { ref } from 'vue'

const currentView = ref('home')

// Template uses <component :is="currentView" />

function switchView(view) {
  currentView.value = view
}

This code switches the displayed component dynamically based on the reactive variable currentView.

Execution Table

Step	Action	Reactive State (currentView)	Rendered Component	DOM Update
1	Initialize currentView	'home'	HomeComponent	Render HomeComponent
2	User clicks to switch to 'about'	'home' -> 'about'	AboutComponent	Replace HomeComponent with AboutComponent
3	User clicks to switch to 'contact'	'about' -> 'contact'	ContactComponent	Replace AboutComponent with ContactComponent
4	User clicks to switch back to 'home'	'contact' -> 'home'	HomeComponent	Replace ContactComponent with HomeComponent
5	No further interaction	'home'	HomeComponent	No DOM change

💡 No more user interactions; reactive state remains stable.

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
currentView	'home'	'about'	'contact'	'home'	'home'

Key Moments - 2 Insights

Why does changing currentView update the displayed component automatically?

Because currentView is a reactive ref, Vue tracks its changes and triggers re-rendering of the <component :is="..." /> element, as shown in steps 2-4 of the execution_table.

What happens if currentView is set to a component name that does not exist?

Vue will try to render the component but fail silently or show nothing, because the dynamic component name does not match any registered component. This is not shown in the table but is important to handle.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of currentView at Step 3?

A 'about'

B 'contact'

C 'home'

D 'contactComponent'

💡 Hint

Check the 'Reactive State (currentView)' column at Step 3 in the execution_table.

At which step does the DOM update to show the AboutComponent?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

Look at the 'DOM Update' column in the execution_table for when AboutComponent is rendered.

If the user never clicks to change views, what will the rendered component be?

A AboutComponent

B ContactComponent

C HomeComponent

D No component

💡 Hint

Check the initial value of currentView and the rendered component at Step 1 in the execution_table.

Concept Snapshot

Dynamic render patterns in Vue use reactive state to choose which component to show.
Use <component :is="stateVar" /> in template.
Change the reactive variable to switch views.
Vue updates DOM automatically on state change.
Ensure component names match registered components.
This enables flexible UI changes without full reload.

Full Transcript

This visual execution shows how Vue dynamically renders components based on reactive state changes. Initially, the reactive variable currentView is set to 'home', so the HomeComponent is rendered. When the user clicks to switch views, currentView changes to 'about' or 'contact', triggering Vue's reactivity system to update the DOM and show the corresponding component. The execution table tracks each step, showing the reactive state, rendered component, and DOM updates. Key moments clarify why reactivity triggers rendering and what happens if an unknown component name is used. The quiz tests understanding of state values and DOM changes at each step. This pattern allows building flexible interfaces that respond instantly to user actions.

Practice

1. What does the :is directive do in Vue's dynamic render patterns?

easy

A. It dynamically switches which component or element to render.

B. It binds a CSS class to an element.

C. It listens for user input events.

D. It creates a loop to render multiple items.

Solution

1. Step 1: Understand the purpose of :is

   The :is directive in Vue allows you to dynamically choose which component or HTML element to render based on a variable.

2. Step 2: Compare with other directives

   Unlike class binding or event listening, :is changes the actual rendered tag or component, making the UI flexible.

3. Final Answer:

   It dynamically switches which component or element to render. -> Option A

4. Quick Check:

   :is = dynamic component switch [OK]

Hint: Remember :is changes the tag or component shown [OK]

Common Mistakes:

• Confusing :is with event handlers
• Thinking :is binds CSS classes
• Assuming :is creates loops

2. Which of the following is the correct syntax to conditionally render a component in Vue using v-if?

easy

A. <MyComponent :is='show' />

B. <MyComponent v-if='show' />

C. <MyComponent v-for='show' />

D. <MyComponent v-show='show' />

Solution

1. Step 1: Identify the directive for conditional rendering

   v-if is used to conditionally render elements or components based on a boolean expression.

2. Step 2: Check the syntax correctness

   The syntax <MyComponent v-if='show' /> correctly applies v-if to render MyComponent only if show is true.

3. Final Answer:

   <MyComponent v-if='show' /> -> Option B

4. Quick Check:

   v-if = conditional render [OK]

Hint: Use v-if to show/hide components conditionally [OK]

Common Mistakes:

• Confusing v-if with v-show
• Using v-for for conditional rendering
• Misusing :is for boolean conditions

3. Given the Vue template:

<component :is="currentView" />

and the data:

data() { return { currentView: 'HomeView' } }

What will be rendered if HomeView is a registered component?

medium

A. An error will occur because component tag is invalid.

B. Nothing will render because currentView is a string.

C. The literal text 'HomeView' will be shown.

D. The HomeView component will be rendered.

Solution

1. Step 1: Understand <component :is=... /> usage

   The <component> tag with :is dynamically renders the component named by the string in currentView.

2. Step 2: Check if HomeView is registered

   Since HomeView is registered, Vue will render that component in place of <component>.

3. Final Answer:

   The HomeView component will be rendered. -> Option D

4. Quick Check:

   Dynamic component name string renders component [OK]

Hint: Dynamic :is renders component named by string [OK]

Common Mistakes:

• Thinking string names don't render components
• Confusing component tag as invalid HTML
• Expecting literal text instead of component

4. What is wrong with this Vue template snippet?

<component :is="viewName" v-if="viewName" />

where viewName can be null or a component name string.

medium

A. It will throw an error if viewName is null.

B. The :is binding must be a component object, not a string.

C. There is no problem; it works correctly.

D. The v-if should be replaced with v-show.

Solution

1. Step 1: Analyze v-if="viewName" behavior

   The v-if prevents rendering when viewName is null or falsy, so the component won't render or cause errors.

2. Step 2: Check :is binding type

   :is accepts a string naming a registered component or a component object, so a string is valid.

3. Final Answer:

   There is no problem; it works correctly. -> Option C

4. Quick Check:

   v-if blocks null, :is accepts string [OK]

Hint: v-if prevents null rendering errors [OK]

Common Mistakes:

• Assuming null causes errors without v-if
• Confusing v-show with v-if
• Thinking :is only accepts objects

5. You want to render a list of components dynamically based on an array of component names, but only if the component name is not empty. Which Vue pattern correctly achieves this?

hard

A. <template>
<component
v-for="name in componentNames"
:key="name"
:is="name"
v-if="name"
/>
</template>

B. <template>
<component
v-for="name in componentNames"
:key="name"
:is="name"
/>
</template>

C. <template>
<component
v-if="componentNames.length"
:is="componentNames"
/>
</template>

D. <template>
<component
v-for="(name, index) in componentNames"
:key="index"
:is="name"
v-show="name"
/>
</template>

Solution

1. Step 1: Use v-for to loop over component names

   Looping over componentNames with v-for renders multiple components dynamically.

2. Step 2: Filter out empty names with v-if="name"

   Adding v-if="name" ensures only non-empty strings render components, avoiding errors or empty renders.

3. Step 3: Use :key with unique name for list rendering

   Using :key="name" helps Vue track each component efficiently.

4. Final Answer:

   Option A correctly loops, filters, and renders components dynamically. -> Option A

5. Quick Check:

   Loop + v-if filter + :is = correct pattern [OK]

Hint: Use v-for with v-if to filter dynamic components [OK]

Common Mistakes:

• Not filtering empty names causing errors
• Using v-if on parent instead of each item
• Missing :key in loops