Яка різниця між value та modelValue?

VueJunior~1 хв читання

Різниця між value та modelValue напряму пов'язана з тим, як працює v-model у Vue 2 і Vue 3, особливо всередині кастомних компонентів.

Це дуже часте питання на співбесідах.

Коротка відповідь

value - використовувалося для v-model у Vue 2, як проп за замовчуванням.
modelValue - використовується у Vue 3 як стандартний проп для v-model.

Тобто:

Vue 2: v-model працює через value + input Vue 3: v-model працює через modelValue + update:modelValue

Vue 2: v-model → value + input

Якщо у Vue 2 компонент використовує v-model:

html

<MyInput v-model="text" />

То всередині компонента:

проп має називатися value
подія має називатися input

Приклад:

props: ['value'],

methods: {
  update(e) {
    this.$emit('input', e.target.value)
  }
}

І input виглядатиме так:

html

<input :value="value" @input="update">

Vue 3: v-model → modelValue + update:modelValue

У Vue 3 було введено новий, більш логічний і гнучкий стандарт.

Тепер v-model:

html

<MyInput v-model="text" />

транслюється в:

проп modelValue
подію update:modelValue

Компонент:

props: {
  modelValue: String
},
emits: ['update:modelValue']

Шаблон:

html

<input
  :value="modelValue"
  @input="$emit('update:modelValue', $event.target.value)"
>

Чому ця зміна з'явилася у Vue 3?

1. Щоб підтримати декілька `v-model` в одному компоненті

У Vue 3 можна:

html

<DatePicker
  v-model:start="startDate"
  v-model:end="endDate"
/>

Працює через:

prop start, подія update:start
prop end, подія update:end

Таку систему неможливо гнучко реалізувати з value.

Головна різниця

Що	Vue 2	Vue 3
Проп за замовчуванням	`value`	`modelValue`
Подія оновлення	`input`	`update:modelValue`
Декілька v-model	неможливо	можливо
Стандартизація	слабка	строга, передбачувана

Приклад порівняння «до / після»

Vue 2 компонент:

vue

<input :value="value" @input="$emit('input', $event.target.value)">

Vue 3 компонент:

vue

<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.