Vue.js: Vue 3.4 New Features

// ❌ The broken version: v-model needs 10 lines of boilerplate
const props = defineProps({ modelValue: String })
const emit = defineEmits(['update:modelValue'])

const internalValue = ref(props.modelValue)
watch(() => props.modelValue, (val) => {
  internalValue.value = val
})
watch(internalValue, (val) => {
  emit('update:modelValue', val)
})

// ✅ The correct version: 1 line handles v-model
const modelValue = defineModel('modelValue')

// Now you can:
// - Read: modelValue.value
// - Write: modelValue.value = 'new value' (emits automatically)
// - watch: watch(modelValue, ...)
// - Two-way binding through v-model in the parent keeps working

// 1. Default value
const modelValue = defineModel('modelValue', { default: '' })

// 2. Type constraint (TypeScript)
const count = defineModel<number>('count', { default: 0 })

// 3. transform (converts on write)
const trimmed = defineModel('text', {
  set(value) {
    return value.trim()  // trims automatically
  }
})

// 4. getter (converts on read)
const upper = defineModel('text', {
  get(value) {
    return value.toUpperCase()  // always uppercase
  }
})

// 5. Multiple v-models
const name = defineModel('name')
const email = defineModel('email')
const phone = defineModel('phone')

<!-- Parent component -->
<CustomInput v-model="name" />
<!-- User types "alice" → trim leaves it unchanged → uppercase → "ALICE" -->

The page shows a "Mirror input" label, an input holding vue, the line "Current value: vue", and a second input rendered by the my-input child (also starting at vue).
Typing "3.4" into the first input updates the text to 3.4 immediately, and the child input mirrors it.
Typing "vue3" into the child input updates both the text and the first input — that round trip is exactly the props/emit pair defineModel hides.

Typing in the first input echoes every keystroke in the paragraph underneath, and the (empty) placeholder shows up whenever the field is emptied.
In the second block, clicking "Validate" with an empty or @-less address displays the red error text;
a valid address clears the error and pops an alert.

1. v-model  -> Live value: (empty)      then  Live value: hello
2. validate -> empty input           => red "❌ Invalid email format"
            -> "alice@mail.com"      => alert "✅ Email is valid", error cleared

// ❌ Vue 3.3 and earlier
const props = defineProps({ count: Number, name: String })

// In the template you use props.count directly
// In JS you must write props.count
// Destructuring loses reactivity
const { count, name } = props  // count/name become plain values

// 1. Simplify props usage
const { count, name } = defineProps<{ count: number; name: string }>()

// 2. Destructure + rename
const { count: total, name: userName } = defineProps<{ count: number; name: string }>()

// 3. Destructure + default values
const { count = 0, name = 'Guest' } = defineProps<{ count?: number; name?: string }>()

// 4. With watch (watch still works after destructuring)
const { count } = defineProps<{ count: number }>()
watch(count, (newVal) => console.log('count changed:', newVal))

// 5. With computed (stays reactive too)
const { count } = defineProps<{ count: number }>()
const double = computed(() => count * 2)

// ⚠️ Destructured props cannot be reassigned
const { count } = defineProps<{ count: number }>()
count = 10  // ❌ Error: Assignment to constant variable

// ✅ Correct: let the parent change it through emit
const emit = defineEmits(['update:count'])
const handleClick = () => emit('update:count', count + 1)

// ❌ Old approach: hand-written ID, collides under SSR
const id = `input-${Math.random()}`

// ✅ Vue 3.4+: useId
const { useId } = Vue
const id = useId()  // 'v-0', 'v-1', ...

<template>
  <input ref="usernameInput">
  <MyChart ref="chartComponent" :data="chartData" />
</template>

<script setup lang="ts">
const { useTemplateRef, onMounted } = Vue
import MyChart from './MyChart.vue'

// ✅ Vue 3.5+: one name does it all
const inputRef = useTemplateRef<HTMLInputElement>('usernameInput')
const chartRef = useTemplateRef<InstanceType<typeof MyChart>>('chartComponent')

// ✅ Perfect TypeScript inference
onMounted(() => {
  inputRef.value?.focus()  // HTMLInputElement type
  chartRef.value?.refresh()  // component instance method
})
</script>

✅ Vue 3.4:
  - defineModel macro replaces verbose v-model code
  - Reactive props destructuring
  - Same-name shorthand (<input :value> instead of :value="value")
  - Improved error handling
  - Rewritten template parser (2x faster)

✅ Vue 3.5:
  - useTemplateRef (recommended)
  - Improved reactive props destructuring
  - useId is stable
  - Deferred teleport
  - Improved Suspense

<!-- ⚠️ Requires a Vite project, illustration only -->

<!-- 1. defineModel macro (replaces verbose v-model code) -->
<script setup>
// 1 line replaces 10: props.modelValue + emit('update:modelValue')
const text = defineModel('text', { default: '' })
</script>
<template>
  <input v-model="text">
</template>

<!-- 2. Reactive props destructuring (Vue 3.4+) -->
<script setup>
// ✅ Still reactive after destructuring (deep by default)
const { count, name } = defineProps<{
  count: number
  name: string
}>()
// Use count and name directly; no props.count / props.name needed
</script>

<!-- 3. useId (an SSR-safe unique ID) -->
<script setup>
const { useId } = Vue
const id = useId()   // generates v-0, v-1, ... automatically
</script>
<template>
  <label :for="id">Email</label>
  <input :id="id" type="email">
</template>

<!-- 4. useTemplateRef (strongly typed, Vue 3.5+) -->
<script setup lang="ts">
const { useTemplateRef, onMounted } = Vue

// TypeScript infers HTMLInputElement | null
const inputRef = useTemplateRef<HTMLInputElement>('usernameInput')

onMounted(() => {
  inputRef.value?.focus()
})
</script>
<template>
  <input ref="usernameInput" type="text">
</template>

This snippet renders nothing on its own — it is a side-by-side reference of four features, each written as an isolated <script setup> block.
Mounted in a real Vite project, block 1 gives a two-way bound input, block 2 a count - name paragraph, block 3 a labelled email field with a generated v-0 id, and block 4 an input that focuses itself on mount.

defineModel       -> <input> bound to `text`, no props/emit boilerplate
props destructure -> <p>{{ count }} - {{ name }}</p> stays reactive
useId             -> <label for="v-0">Email</label><input id="v-0">
useTemplateRef    -> input focused on mounted, typed HTMLInputElement | null

A five-row troubleshooting table.
Each row names a mistake, the symptom you would actually observe, and the one-line fix — a handy checklist when a migration suddenly stops working.

Renders one table: 5 rows x 3 columns (Mistake | Symptom | Fix).

A five-row table summarizing the measurable wins of the upgrade;
the percentages are typical project-level estimates rather than a guarantee for every codebase.

Renders one table: 5 rows x 2 columns (Benefit | Data).