JavaScript expressions in templates in Vue - Performance & Optimization

Performance: JavaScript expressions in templates

MEDIUM IMPACT

This affects rendering speed and responsiveness by how often expressions are evaluated and how complex they are inside Vue templates.

Using JavaScript expressions inside Vue templates for dynamic content

Vue

<script setup>
import { computed } from 'vue'
const activeCount = computed(() => items.filter(item => item.active).length)
</script>
<template>
  <div>{{ activeCount }}</div>
</template>

Computes once and caches result until dependencies change, reducing repeated work.

📈 Performance Gainsingle computed recalculation per dependency change, faster rendering

Using JavaScript expressions inside Vue templates for dynamic content

Vue

<template>
  <div>{{ items.filter(item => item.active).length }}</div>
</template>

The filter runs on every render causing repeated heavy computation.

📉 Performance Costtriggers multiple recalculations and slows down rendering on each update

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Complex inline expressions	Multiple recalculations	Multiple reflows if DOM changes	High paint cost due to frequent updates	[X] Bad
Computed properties for logic	Minimal recalculations	Single reflow per change	Lower paint cost with fewer updates	[OK] Good

Rendering Pipeline

Vue evaluates template expressions during the render phase. Complex expressions cause longer render times and can trigger more DOM updates.

→Template Compilation

→Render

→Reactivity Tracking

→DOM Update

⚠️ BottleneckRender phase due to repeated evaluation of complex expressions

Core Web Vital Affected

INP

This affects rendering speed and responsiveness by how often expressions are evaluated and how complex they are inside Vue templates.

Optimization Tips

1Avoid heavy computations directly inside templates.

2Use computed properties to cache expensive calculations.

3Keep template expressions simple and fast to evaluate.

Performance Quiz - 3 Questions

Why should you avoid complex JavaScript expressions directly inside Vue templates?

A Because they increase the bundle size significantly

B Because they run on every render causing slower updates

C Because Vue does not support complex expressions in templates

D Because they cause CSS to reload

DevTools: Performance

How to check: Record a performance profile while interacting with the component, then inspect the 'Update' and 'Recalculate Style' events to see how often expressions run.

What to look for: Look for long scripting times and frequent recalculations indicating expensive template expressions.

Practice

1. In Vue templates, which syntax correctly inserts a JavaScript expression to display a variable named message?

easy

A. [[ message ]]

B. { message }

C. {{ message }}

D. ${ message }

Solution

1. Step 1: Recognize Vue interpolation syntax

   Vue uses double curly braces {{ }} to insert JavaScript expressions in templates.

2. Step 2: Match the correct syntax for variable display

   The correct way to show the value of message is {{ message }}.

3. Final Answer:

   <code>{{ message }}</code> -> Option C

4. Quick Check:

   Vue interpolation = {{ }} [OK]

Hint: Use double curly braces {{ }} to insert expressions [OK]

Common Mistakes:

• Using single curly braces or square brackets
• Trying to use template literals syntax inside templates
• Forgetting to use any braces

2. Which of the following is the correct way to write a simple math expression inside a Vue template to add 5 and 3?

easy

A. {{ 5 & 3 }}

B. {{ 5 + 3 }}

C. {{ add(5, 3) }}

D. {{ '5' + '3' }}

Solution

1. Step 1: Understand expression evaluation in Vue templates

   Vue evaluates JavaScript expressions inside {{ }} as normal JavaScript.

2. Step 2: Identify the correct math addition expression

   5 + 3 correctly adds numbers to get 8. {{ '5' + '3' }} concatenates strings, {{ add(5, 3) }} calls an undefined function, and {{ 5 & 3 }} uses bitwise AND.

3. Final Answer:

   <code>{{ 5 + 3 }}</code> -> Option B

4. Quick Check:

   Math addition uses + inside {{ }} [OK]

Hint: Use normal JavaScript math inside {{ }} [OK]

Common Mistakes:

• Using string quotes for numbers causing concatenation
• Calling undefined functions inside templates
• Using bitwise operators instead of arithmetic

3. Given the Vue data property count: 4, what will be displayed by this template snippet?

<div>{{ count * 2 }}</div>

medium

A. 8

B. count * 2

C. 4 * 2

D. undefined

Solution

1. Step 1: Evaluate the expression inside the template

   The expression count * 2 multiplies the value of count (which is 4) by 2.

2. Step 2: Calculate the result

   4 multiplied by 2 equals 8, so the template will display 8.

3. Final Answer:

   8 -> Option A

4. Quick Check:

   4 * 2 = 8 [OK]

Hint: Multiply variables directly inside {{ }} [OK]

Common Mistakes:

• Expecting the expression to print as text
• Confusing variable name with string
• Assuming undefined if variable is not reactive

4. What is wrong with this Vue template expression?

<div>{{ user.name.toUpperCase }}</div>

Assuming user.name is a string.

medium

A. toUpperCase is not a valid method

B. Cannot use functions inside templates

C. user.name is undefined

D. Missing parentheses to call the function

Solution

1. Step 1: Identify the method usage error

   toUpperCase is a function and must be called with parentheses ().

2. Step 2: Correct the expression

   The correct expression is user.name.toUpperCase() to get the uppercase string.

3. Final Answer:

   Missing parentheses to call the function -> Option D

4. Quick Check:

   Call methods with () inside {{ }} [OK]

Hint: Always add () when calling functions in templates [OK]

Common Mistakes:

• Forgetting parentheses on method calls
• Trying to use unsupported functions
• Assuming properties auto-call functions

5. You want to display a list of numbers doubled inside a Vue template using numbers = [1, 2, 3]. Which expression correctly creates a comma-separated string of doubled numbers?

hard

A. {{ numbers.map(n => n * 2).join(', ') }}

B. {{ numbers * 2 }}

C. {{ numbers.forEach(n => n * 2) }}

D. {{ numbers.map(n => n * 2) }}

Solution

1. Step 1: Understand array transformation in templates

   To double each number, use map with a function n => n * 2.

2. Step 2: Convert the array to a string

   Using join(', ') converts the array to a comma-separated string for display.

3. Final Answer:

   <code>{{ numbers.map(n => n * 2).join(', ') }}</code> -> Option A

4. Quick Check:

   Use map + join for array display [OK]

Hint: Use map() then join() to show transformed arrays [OK]

Common Mistakes:

• Trying to multiply array directly
• Using forEach which returns undefined
• Not joining array to string for display