v-model 的原理是什麼？

v-model 是語法糖

v-model 是一個雙向綁定的語法糖，背後等價於：

• 綁定 value prop（傳資料給子組件或表單元素）
• 監聽 input 事件（接收子組件或使用者的變更）

原生表單元素

<!-- 使用 v-model -->
<input v-model="name" />

<!-- 等價於 -->
<input :value="name" @input="name = $event.target.value" />

Vue 3 組件上的 v-model

<!-- 父組件 -->
<MyInput v-model="searchText" />

<!-- 等價於 -->
<MyInput
  :modelValue="searchText"
  @update:modelValue="searchText = $event"
/>

<!-- 子組件 MyInput.vue -->
<template>
  <input
    :value="modelValue"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

Vue 3 多個 v-model

Vue 3 支援在同一個組件上使用多個 v-model：

<UserForm
  v-model:firstName="first"
  v-model:lastName="last"
/>

<!-- UserForm.vue -->
<script setup>
defineProps(['firstName', 'lastName'])
defineEmits(['update:firstName', 'update:lastName'])
</script>

Vue 2 vs Vue 3 差異

	Vue 2	Vue 3
prop 名稱	value	modelValue
事件名稱	input	update:modelValue
多個 v-model	❌（需用 .sync）	✅ 原生支援