Custom v-model on components in Vue - Performance & Optimization

Performance: Custom v-model on components

MEDIUM IMPACT

This affects how component state updates propagate and how often the DOM updates due to two-way binding.

Binding a custom input component with two-way data binding

Vue

<CustomInput v-model="inputValue" />

// Inside CustomInput emits 'update:modelValue' event only

Vue handles syncing automatically with a single event, reducing re-renders.

📈 Performance Gainsingle re-render per input event

Binding a custom input component with two-way data binding

Vue

<CustomInput v-model="inputValue" @input="val => inputValue = val" />

Manually syncing input events causes double updates and extra re-renders.

📉 Performance Costtriggers 2 re-renders per input event

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Manual event sync with extra listeners	Multiple reactive updates	2+ reflows per input	Higher paint cost due to repeated DOM patches	[X] Bad
Single 'update:modelValue' event emission	Single reactive update	1 reflow per input	Lower paint cost with minimal DOM patches	[OK] Good

Rendering Pipeline

Custom v-model updates trigger component state changes that flow through Vue's reactive system, causing reactivity tracking, virtual DOM diffing, and DOM patching.

→Reactivity Tracking

→Virtual DOM Diffing

→DOM Patching

⚠️ BottleneckExcessive or redundant event emissions cause multiple reactivity updates and DOM patches.

Core Web Vital Affected

INP

This affects how component state updates propagate and how often the DOM updates due to two-way binding.

Optimization Tips

1Emit only one 'update:modelValue' event per input change.

2Avoid manually syncing input events alongside v-model.

3Use Vue's built-in v-model syntax for automatic efficient binding.

Performance Quiz - 3 Questions

What causes extra re-renders when using custom v-model on Vue components?

A Binding with v-bind instead of v-model

B Using only 'update:modelValue' event emission

C Manually syncing input events alongside v-model

D Using computed properties inside the component

DevTools: Performance

How to check: Record a performance profile while interacting with the input. Look for multiple component updates or repeated DOM patches.

What to look for: Fewer component updates and shorter scripting times indicate better custom v-model performance.