v-for with v-if precedence in Vue - Performance & Optimization

Performance: v-for with v-if precedence

MEDIUM IMPACT

This affects rendering speed and responsiveness by controlling how many DOM nodes Vue creates and updates during list rendering.

Rendering a filtered list conditionally

Vue

<li v-for="item in filteredItems" :key="item.id">{{ item.name }}</li>

<script setup>
import { computed } from 'vue'
const filteredItems = computed(() => items.filter(item => item.visible))
</script>

Filtering items before rendering reduces DOM nodes and avoids repeated v-if checks during rendering.

📈 Performance Gainsingle reflow and paint for filtered list, faster initial render and updates

Rendering a filtered list conditionally

Vue

<li v-for="item in items" :key="item.id" v-if="item.visible">{{ item.name }}</li>

Vue runs v-if check on every item after rendering starts, creating unnecessary DOM nodes and wasting CPU.

📉 Performance Costtriggers N reflows and repaints where N = number of items, blocking rendering longer

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
v-for with v-if inside	Creates all nodes then removes some	N reflows for N items	High paint cost due to node removal	[X] Bad
v-for on pre-filtered list	Creates only needed nodes	Single reflow	Low paint cost	[OK] Good

Rendering Pipeline

Vue first processes v-for to create DOM nodes for all items, then applies v-if to each node, causing extra layout and paint work.

→Template Compilation

→Virtual DOM Patch

→Layout

→Paint

⚠️ BottleneckLayout stage due to many unnecessary DOM nodes created then removed

Core Web Vital Affected

INP

This affects rendering speed and responsiveness by controlling how many DOM nodes Vue creates and updates during list rendering.

Optimization Tips

1Avoid using v-if directly inside v-for loops.

2Filter your data before rendering lists with v-for.

3Use computed properties to prepare filtered lists for better performance.

Performance Quiz - 3 Questions

What is the main performance issue with using v-if inside a v-for loop?

A Vue skips rendering all nodes, so no DOM nodes are created.

B v-if inside v-for delays JavaScript execution but not rendering.

C Vue creates all DOM nodes first, then removes those failing v-if, causing extra layout and paint work.

D v-if inside v-for reduces bundle size significantly.

DevTools: Performance

How to check: Record a performance profile while loading the component, then look for long scripting and layout tasks related to list rendering.

What to look for: Look for repeated layout and paint events caused by many DOM nodes being created and removed, indicating v-if inside v-for inefficiency.

Practice

1. In Vue, when using v-for and v-if on the same element, which happens first?

easy

A. v-if runs first, then v-for loops over the filtered items.

B. Both run simultaneously.

C. v-for runs first, then v-if filters the rendered items.

D. Neither runs; Vue throws an error.

Solution

1. Step 1: Understand Vue's rendering order

   Vue processes v-for first to create the list of items.

2. Step 2: Apply v-if filtering

   After the list is created, v-if decides which items to actually render.

3. Final Answer:

   v-for runs first, then v-if filters the rendered items. -> Option C

4. Quick Check:

   v-for before v-if = B [OK]

Hint: Remember: loop first, then filter with v-if [OK]

Common Mistakes:

• Thinking v-if filters before looping
• Assuming simultaneous execution
• Believing Vue throws error with both directives

2. Which of the following is the correct syntax to use v-for with v-if on the same element in Vue?

easy

A. <li v-for="item in items"> <template v-if="item.active">{{ item.name }}</template> </li>

B. <li v-for="item in items" v-if="item.active">{{ item.name }}</li>

C. <li v-if="item.active" v-for=item in items>{{ item.name }}</li>

D. <li v-if="item.active"> <template v-for="item in items">{{ item.name }}</template> </li>

Solution

1. Step 1: Check directive order on the same element

   Vue allows v-for and v-if on the same element; v-for should come first logically but order in code doesn't affect behavior.

2. Step 2: Validate syntax correctness

   <li v-for="item in items" v-if="item.active">{{ item.name }}</li> correctly places both directives on the <li> element with proper syntax.

3. Final Answer:

   <li v-for="item in items" v-if="item.active">{{ item.name }}</li> -> Option B

4. Quick Check:

   Correct syntax with both directives on same element = C [OK]

Hint: Put v-for and v-if on same tag; v-for first is common [OK]

Common Mistakes:

• Swapping v-for and v-if causing confusion
• Using v-if inside v-for incorrectly
• Placing v-for inside v-if template incorrectly

3. Given the Vue template:

<ul>
  <li v-for="item in items" v-if="item.show">{{ item.name }}</li>
</ul>

and data:

items = [
  { name: 'A', show: true },
  { name: 'B', show: false },
  { name: 'C', show: true }
]

What will be rendered inside the <ul>?

medium

A. AC

B. ABC

C. B

D. No items rendered

Solution

1. Step 1: Loop through all items with v-for

   Vue creates list items for all three objects: A, B, and C.

2. Step 2: Apply v-if to filter items

   Only items with show: true are rendered, so B is skipped.

3. Final Answer:

   <li>A</li><li>C</li> -> Option A

4. Quick Check:

   v-if filters out B, so only A and C show [OK]

Hint: v-for creates all, v-if hides unwanted [OK]

Common Mistakes:

• Assuming v-if filters before v-for
• Expecting all items to render
• Confusing property names in data

4. What is the main issue with this Vue template?

<div v-if="item.active" v-for="item in items">{{ item.name }}</div>

Assuming items is an array of objects with active boolean property.

medium

A. There is no issue; this is the recommended pattern.

B. The v-if should be inside the loop, not on the same element.

C. The order of v-if and v-for is invalid and causes syntax error.

D. Using v-if and v-for on the same element can cause performance issues.

Solution

1. Step 1: Understand v-for and v-if on same element

   Vue processes v-for first, then v-if filters items, but this means all items are looped before filtering.

2. Step 2: Identify performance concern

   Using v-if with v-for on the same element can cause unnecessary loops and slow rendering.

3. Final Answer:

   Using v-if and v-for on the same element can cause performance issues. -> Option D

4. Quick Check:

   v-for then v-if may hurt performance [OK]

Hint: Avoid v-if on same element as v-for for better speed [OK]

Common Mistakes:

• Thinking order causes syntax error
• Believing no performance impact
• Assuming v-if runs before v-for

5. You want to display only active users from a large list efficiently. Which Vue pattern is best to combine v-for and v-if for performance?

hard

A. Filter the list in a computed property, then use v-for without v-if.

B. Use v-for with v-if on the same element to filter active users.

C. Use v-if outside the v-for to filter the entire list.

D. Use nested v-for loops with v-if inside.

Solution

1. Step 1: Understand performance impact of v-if with v-for

   Using v-if inside v-for causes Vue to loop all items before filtering, which is inefficient for large lists.

2. Step 2: Use computed property to pre-filter data

   Filtering the list in a computed property returns only active users, so v-for loops only needed items without v-if.

3. Final Answer:

   Filter the list in a computed property, then use v-for without v-if. -> Option A

4. Quick Check:

   Pre-filter data before v-for for best speed [OK]

Hint: Filter data first, then loop with v-for only [OK]

Common Mistakes:

• Using v-if inside v-for causing slow loops
• Trying to filter with v-if outside v-for incorrectly
• Using nested loops unnecessarily