v-model with checkboxes in Vue - Performance & Optimization

Performance: v-model with checkboxes

MEDIUM IMPACT

This affects how user input updates the UI and how Vue tracks checkbox states, impacting interaction responsiveness and rendering.

Binding multiple checkboxes to a single array using v-model

Vue

<template>
  <input type="checkbox" :value="item" v-model="selected" />
</template>

<script setup>
import { ref } from 'vue';
const selected = ref([]);
</script>

Vue's v-model automatically manages array updates and state syncing with minimal DOM operations.

📈 Performance GainSingle reflow and repaint per toggle, improving input responsiveness.

Binding multiple checkboxes to a single array using v-model

Vue

<template>
  <input type="checkbox" :value="item" @change="updateSelection($event, item)" />
</template>

<script setup>
import { ref } from 'vue';
const selected = ref([]);
function updateSelection(event, item) {
  if (event.target.checked) {
    selected.value.push(item);
  } else {
    selected.value = selected.value.filter(i => i !== item);
  }
}
</script>

Manually handling checkbox state causes unnecessary array mutations and multiple re-renders per change.

📉 Performance CostTriggers multiple reflows and repaints per checkbox toggle due to manual DOM event handling.

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual @change handler	Multiple array mutations and DOM updates	Multiple reflows per toggle	High paint cost due to repeated updates	[X] Bad
v-model binding	Single reactive update per toggle	Single reflow per toggle	Minimal paint cost	[OK] Good

Rendering Pipeline

When a checkbox changes, Vue updates the reactive state bound by v-model, triggering a minimal DOM update and repaint.

→Event Handling

→Reactive State Update

→Layout

→Paint

⚠️ BottleneckLayout and Paint stages due to DOM updates on checkbox toggle

Core Web Vital Affected

INP

This affects how user input updates the UI and how Vue tracks checkbox states, impacting interaction responsiveness and rendering.

Optimization Tips

1Use v-model to bind checkbox arrays for efficient reactive updates.

2Avoid manual event handlers that mutate arrays causing extra reflows.

3Batch state changes to minimize layout recalculations and repaints.

Performance Quiz - 3 Questions

What is the main performance benefit of using v-model with checkboxes in Vue?

A It reduces manual DOM event handling and batches updates efficiently.

B It increases the number of reflows to keep UI updated.

C It disables reactive updates to improve speed.

D It loads checkbox states from the server automatically.

DevTools: Performance

How to check: Record a performance profile while toggling checkboxes. Look for event handlers and layout recalculations.

What to look for: Fewer layout recalculations and shorter event handler durations indicate better performance with v-model.