Vue.js: Vue 3.4の新機能

// ❌ The "Broken" Version：v-model Required 10 Sample Code
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)
})

// ✅ Correct Version：1 All set v-model
const modelValue = defineModel('modelValue')

// It's possible now：
// - Read: modelValue.value
// - Write: modelValue.value = 'new value' (Automatic emit)
// - watch：watch(modelValue, ...)
// - Parent Component v-model Two-way binding works as usual

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

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

// 3. transform Convert（Conversion at the Time of Writing）
const trimmed = defineModel('text', {
  set(value) {
    return value.trim()  // Automatic trim
  }
})

// 4. getter（Conversion During Reading）
const upper = defineModel('text', {
  get(value) {
    return value.toUpperCase()  // Always uppercase
  }
})

// 5. Several v-model
const name = defineModel('name')
const email = defineModel('email')
const phone = defineModel('phone')

<!-- Parent Component -->
<CustomInput v-model="name" />
<!-- User Input "alice" → trim Unchanged → uppercase → "ALICE" -->

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

// Use directly in the template props.count
// JS Key Points props.count
// Deconstruction may result in a loss of response
const { count, name } = props  // count/name Convert to a regular value

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

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

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

// 4. In conjunction with watch（After deconstruction watch Still working）
const { count } = defineProps<{ count: number }>()
watch(count, (newVal) => console.log('count changed:', newVal))

// 5. In conjunction with computed（Stay responsive as well）
const { count } = defineProps<{ count: number }>()
const double = computed(() => count * 2)

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

// ✅ Correct：Via emit Have the parent component modify
const emit = defineEmits(['update:count'])
const handleClick = () => emit('update:count', count + 1)

初期表示: 1 - Alice（親から渡った値）
+1 クリックで update:count が発火し 2 - Alice に更新

// ❌ Old notation：Handwritten ID，SSR There will be a conflict
const id = `input-${Math.random()}`

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

初期表示: Email ラベルと入力欄（id は v-0 など自動採番）
エラー時は id が v-0-error の段落が表示され aria-errormessage と一致
SSR でもサーバとクライアントで同じ id になる

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

<script setup lang="ts">
import { useTemplateRef, onMounted } from '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')

// ✅ TypeScript Perfect Inference
onMounted(() => {
  inputRef.value?.focus()  // HTMLInputElement Type
  chartRef.value?.refresh()  // Component Instance Methods
})
</script>

<template>
  <input ref="usernameInput" v-model="username">
  <MyChart ref="chartComponent" :data="chartData" />
</template>

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

const username = ref('')
const chartData = ref([1, 2, 3])

// ✅ Vue 3.5+：TypeScript Perfect Inference
const inputRef = useTemplateRef<HTMLInputElement>('usernameInput')
const chartRef = useTemplateRef<InstanceType<typeof MyChart>>('chartComponent')

onMounted(() => {
  inputRef.value?.focus()
  chartRef.value?.refresh()
})
</script>

初期表示: テキスト入力欄と MyChart（data は [1, 2, 3]）
マウント後に usernameInput へフォーカス
chartComponent.refresh() が呼ばれ最新データで再描画

✅ Vue 3.4：
  - defineModel Macro Replacement v-model Complex Notation
  - Responsive props Deconstruction
  - Abbreviations with the Same Name（<input :value> Replace :value="value"）
  - Improvements to Error Handling
  - Template Parser Override（2x Performance）

✅ Vue 3.5：
  - useTemplateRef（Recommendations）
  - Responsive props Deconstruction and Improvement
  - useId Stable
 - Deferred teleport
  - Improved Suspense

<!-- 1. Basics -->
<script setup>
const modelValue = defineModel('modelValue')
</script>

<!-- 2. Default value -->
<script setup>
const count = defineModel('count', { default: 0 })
</script>

<!-- 3. TypeScript Type -->
<script setup lang="ts">
const user = defineModel<User>('user', { default: () => ({}) })
</script>

<!-- 4. transform Convert -->
<script setup>
const trimmed = defineModel('text', {
  set(val) { return val?.trim() || '' }
})
</script>

<!-- 5. Several v-model -->
<script setup>
const username = defineModel('username')
const password = defineModel('password')
</script>

親の値が子の v-model に反映（count は既定値 0）
子で入力すると親の値も即更新、transform は trim 後の文字列を返す
username / password の複数 v-model が同時に同期