v-model with radio buttons in Vue - Performance & Optimization

Performance: v-model with radio buttons

MEDIUM IMPACT

This affects how user input updates the UI and how Vue manages DOM updates for radio button groups.

Binding user selection to a radio button group

Vue

<template>
  <input type="radio" value="option1" v-model="selected" /> Option 1
  <input type="radio" value="option2" v-model="selected" /> Option 2
</template>
<script setup>
import { ref } from 'vue'
const selected = ref(null)
</script>

v-model automatically binds the input and updates state efficiently with minimal DOM operations.

📈 Performance GainSingle event listener per input and optimized reactive updates reduce reflows and improve INP.

Binding user selection to a radio button group

Vue

<template>
  <input type="radio" value="option1" :checked="selected === 'option1'" @change="selected = $event.target.value" /> Option 1
  <input type="radio" value="option2" :checked="selected === 'option2'" @change="selected = $event.target.value" /> Option 2
</template>
<script setup>
import { ref } from 'vue'
const selected = ref(null)
</script>

Manually handling change events causes more code and can lead to unnecessary re-renders or missed updates.

📉 Performance CostTriggers multiple event listeners and may cause extra reflows if not managed properly.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual @change handlers on each radio	Multiple event listeners	Multiple reflows if state triggers broad updates	Higher paint cost due to extra layout recalculations	[X] Bad
v-model binding on radio buttons	Single reactive binding per input	Minimal reflows limited to changed input	Lower paint cost due to targeted updates	[OK] Good

Rendering Pipeline

When a radio button changes, Vue updates the reactive state, triggering a re-render only for affected parts. The browser recalculates styles and layouts only if necessary.

→Event Handling

→Style Calculation

→Layout

→Paint

⚠️ BottleneckLayout stage if many DOM nodes update unnecessarily

Core Web Vital Affected

INP

This affects how user input updates the UI and how Vue manages DOM updates for radio button groups.

Optimization Tips

1Use v-model to bind radio buttons for efficient reactive updates.

2Avoid manual event handlers that cause extra DOM operations.

3Minimize layout recalculations by limiting updates to changed inputs.

Performance Quiz - 3 Questions

Why is using v-model with radio buttons better for performance than manual @change handlers?

A v-model adds more event listeners but batches updates later.

B v-model reduces the number of event listeners and optimizes reactive updates.

C Manual handlers are faster because they avoid Vue reactivity.

D There is no performance difference between them.

DevTools: Performance

How to check: Record a performance profile while interacting with radio buttons. Look for event handler calls and layout recalculations.

What to look for: Fewer event listeners and minimal layout thrashing indicate good performance with v-model.