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.