v-model with select dropdowns in Vue - Performance & Optimization

Performance: v-model with select dropdowns

MEDIUM IMPACT

This affects how quickly the dropdown updates the UI and how many DOM updates happen when the user selects an option.

Binding a select dropdown with many options and v-model

Vue

<template>
  <select v-model="selectedId">
    <option v-for="item in items" :key="item.id" :value="item.id">
      {{ item.name }}
    </option>
  </select>
</template>

<script setup>
import { ref, computed } from 'vue'
const selectedId = ref(null)
const items = ref(Array(1000).fill(0).map((_, i) => ({ id: i, name: `Item ${i}` })))
const selected = computed(() => items.value.find(item => item.id === selectedId.value))
</script>

Binding primitive values (like IDs) reduces reactivity overhead and avoids deep object comparisons.

📈 Performance GainImproves input responsiveness by reducing re-renders and memory usage.

Binding a select dropdown with many options and v-model

Vue

<template>
  <select v-model="selected">
    <option v-for="item in items" :key="item.id" :value="item">
      {{ item.name }}
    </option>
  </select>
</template>

<script setup>
import { ref } from 'vue'
const selected = ref(null)
const items = ref(Array(1000).fill(0).map((_, i) => ({ id: i, name: `Item ${i}` })))
</script>

Binding entire objects as option values causes Vue to do deep comparisons and triggers many re-renders on selection.

📉 Performance CostTriggers multiple re-renders and increases memory usage, slowing input responsiveness (INP).

Performance Comparison

Pattern	DOM Operations	Reflows	Paint Cost	Verdict
Binding full objects as option values	High (many reactive dependencies)	Multiple reflows on selection	High paint cost due to re-renders	[X] Bad
Binding primitive IDs as option values	Low (simple reactive refs)	Single reflow on selection	Low paint cost	[OK] Good

Rendering Pipeline

When v-model updates on select change, Vue updates reactive state, triggers reactivity system, then updates DOM nodes for selected option.

→Reactivity Update

→Virtual DOM Diff

→DOM Update

→Paint

⚠️ BottleneckReactivity Update and Virtual DOM Diff when binding complex objects

Core Web Vital Affected

INP

This affects how quickly the dropdown updates the UI and how many DOM updates happen when the user selects an option.

Optimization Tips

1Bind primitive values (like IDs) in select options instead of full objects.

2Avoid complex reactive objects as v-model values to reduce re-renders.

3Use computed properties to map selected IDs back to objects if needed.

Performance Quiz - 3 Questions

What is the main performance issue when binding entire objects as option values in v-model select?

A Vue does deep comparisons causing slow reactivity updates

B The browser blocks rendering due to large CSS files

C The select element triggers multiple network requests

D The options are not accessible for screen readers

DevTools: Performance

How to check: Record a performance profile while selecting options in the dropdown. Look for long scripting or rendering tasks triggered by selection.

What to look for: Check for multiple re-renders or long scripting times indicating heavy reactivity or DOM updates.