> Что такое двустороннее связывание в Vue (Vue.js)

Короткий ответ

Двустороннее связывание (two-way binding) в Vue - это механизм, который синхронизирует состояние приложения и отображение в обе стороны: изменения в данных автоматически обновляют UI, а пользовательский ввод в шаблоне немедленно меняет данные. Реализуется через директиву v-model, которая является синтаксическим сахаром над связкой :value + @input. Это упрощает работу с формами и интерактивными элементами.

Подробное объяснение

Двустороннее связывание решает задачу синхронизации между моделью (данными) и представлением (DOM). В Vue это достигается за счет реактивной системы: когда свойство данных изменяется, Vue автоматически перерисовывает зависимые элементы. С другой стороны, события от пользователя (например, ввод текста) обновляют данные.

Директива v-model - это основной инструмент. Для разных элементов она работает по-разному:

• Для <input> и <textarea> - использует свойство value и событие input.
• Для чекбоксов и радио-кнопок - свойство checked и событие change.
• Для <select> - свойство value и событие change.

На уровне реализации v-model - это просто синтаксический сахар. Например, для текстового поля:

HTML
<input v-model="message">

эквивалентно:

HTML
<input :value="message" @input="message = $event.target.value">

Важно понимать, что двустороннее связывание не нарушает однонаправленный поток данных в Vue. Оно просто предоставляет удобный способ работы с формами, где изменения пользователя должны немедленно отражаться в данных. Внутри компонента данные все равно передаются от родителя к ребенку через props, а события - от ребенка к родителю через emit.

На практике

В реальных проектах v-model используется повсеместно для форм, фильтров, поиска и любых интерактивных полей ввода. Например, в форме регистрации:

HTML
<input v-model="user.email" type="email" placeholder="Email">

При каждом нажатии клавиши свойство user.email обновляется, и можно сразу валидировать данные или показывать подсказки.

Для кастомных компонентов v-model настраивается через prop modelValue и событие update:modelValue (начиная с Vue 3). Это позволяет создавать переиспользуемые компоненты с двусторонним связыванием, например, кастомный инпут или слайдер.

Также можно использовать модификаторы: .lazy (синхронизация по событию change вместо input), .number (автоматическое приведение к числу), .trim (удаление пробелов).

Пример кода

<template>
  <div>
    <input v-model="name" placeholder="Введите имя">
    <p>Привет, {{ name }}!</p>
    
    <!-- Кастомный компонент с v-model -->
    <CustomInput v-model="email" />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import CustomInput from './CustomInput.vue'

const name = ref('')
const email = ref('')
</script>

Для кастомного компонента:

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

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

Как отвечать на собеседовании

Начни с краткого определения, затем объясни механизм через v-model и реактивность. Упомяни, что это синтаксический сахар для связки :value + @input. Приведи пример с формой и кастомным компонентом. Если спросят про отличия от React, скажи, что в React нет встроенного двустороннего связывания - там используется controlled components с явным управлением через value и onChange.

Не углубляйся в детали реализации реактивности, если не спросят. Для junior достаточно понимания, как работает v-model и где его применять.

Что проверяет интервьюер

• Понимание базового механизма двустороннего связывания.
• Знание директивы v-model и её эквивалента.
• Умение объяснить разницу между однонаправленным и двусторонним потоком данных.
• Понимание, как v-model работает с разными типами элементов.
• Базовое знание кастомных компонентов с v-model.

Типичные ошибки

• Путать v-model с v-bind - первое двустороннее, второе только передает данные.
• Думать, что v-model нарушает однонаправленный поток данных в Vue - на самом деле это просто удобная обертка.
• Забывать про модификаторы .lazy, .number, .trim.
• Неправильно настраивать v-model в кастомных компонентах (использовать не те prop/event).
• Считать, что v-model работает только с формами - он применим к любым компонентам, где нужно двустороннее связывание.