Что такое двустороннее связывание в Vue

Что проверяют

Понимаете ли вы, что за двусторонним связыванием стоит обычный однонаправленный поток данных плюс событие, и не считаете ли v-model магией. Дальше почти всегда просят написать свой компонент, который так умеет.

Как отвечать

Двустороннее связывание это синтаксический сахар. На элементе формы v-model разворачивается в привязку значения и обработчик ввода, на компоненте в проп modelValue и событие update:modelValue. Данные по-прежнему текут вниз, события вверх, отдельного механизма нет.

<script setup>
const text = defineModel()
</script>

<template>
  <input v-model="text">
</template>

Полезно назвать детали: модификаторы .lazy, .number и .trim меняют событие и приводят тип; у чекбоксов и переключателей связывается не ввод, а выбор, и для них есть свои атрибуты значений; на одном компоненте можно держать несколько именованных связей; в прошлой мажорной версии те же роли играли проп value с событием input и модификатор .sync.

Отдельно стоит сказать, откуда берётся реактивность: объект оборачивается прокси, перехват чтения собирает зависимости, перехват записи запускает перерисовку.

Где спотыкаются

Меняют проп внутри компонента. Значение придёт сверху заново и затрёт правку, а в консоли появится предупреждение. Наружу нужно испускать событие обновления либо заводить вычисляемое свойство с чтением и записью.

Связывают поле формы напрямую со значением из хранилища. Ссылка общая, правка применяется мгновенно, и кнопка отмены становится невозможной: форме нужна локальная копия, которая попадает в хранилище только при сохранении.

Форматируют ввод наблюдателем за той же переменной. Обновление приходит уже после записи, курсор прыгает в конец строки, а при неаккуратной проверке появляется цикл обновлений. Приводить ввод к нужному виду надо в обработчике или в вычисляемом свойстве.