Сталкивался ли с двусторонним data binding в JavaScript

Двустороннее связывание данных (two-way data binding) означает автоматическую синхронизацию данных между моделью и представлением. В чистом JavaScript можно реализовать через Object.defineProperty или прокси, но чаще используют фреймворки.

Пример на ванильном JS:

const data = {};
Object.defineProperty(data, 'text', {
  get() { return this._text; },
  set(value) {
    this._text = value;
    document.getElementById('input').value = value;
    document.getElementById('output').textContent = value;
  }
});

document.getElementById('input').addEventListener('input', (e) => {
  data.text = e.target.value;
});

Во фреймворках:

• Angular: [(ngModel)]
• Vue: v-model
• React: требует ручного управления через value + onChange (односторонний поток)

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