Основой реактивности Tom Select является синхронизация трёх слоёв состояния: внутреннего JS-состояния, DOM-представления и внешнего значения поля формы. Каждый из этих слоёв может изменяться независимо, но библиотека стремится поддерживать их консистентность через единый слой управления состоянием.
Внутреннее состояние включает:
Любое изменение состояния проходит через методы API, а не напрямую через DOM, что позволяет сохранять предсказуемость поведения и упрощает обновления интерфейса.
Обновления в Tom Select не происходят через прямое вмешательство в DOM-узлы. Вместо этого используется событийно-методная модель:
Такой подход позволяет избегать рассинхронизации между визуальным представлением и фактическими данными формы.
Ключевые методы, влияющие на реактивность:
setValue(value) — установка выбранного значенияaddItem(value) — добавление элемента в выбранныеremoveItem(value) — удаление элементаclear() — сброс выбораclearOptions() — очистка списка опцийaddOption(data) — динамическое добавление опцииКаждый из этих методов запускает цепочку обновлений UI и событий.
Формальное значение select-элемента остаётся источником внешней синхронизации. Tom Select поддерживает двустороннюю связь:
При этом используется механизм защиты от циклических обновлений. Внутренний флаг состояния блокирует повторную реакцию на собственные изменения.
При множественных изменениях важно избегать каскадных перерисовок. Tom Select использует стратегию батчинга обновлений:
Особое значение имеют “тихие” обновления:
setValue(value, true) — обновление без вызова
событийaddItem(value, true) — добавление без триггера
onchangerefreshItems() — принудительная синхронизация
отображенияТакие режимы позволяют выполнять массовые операции без перегрузки UI.
Список опций является динамической структурой, особенно при использовании удалённых источников данных (remote data). При добавлении новых данных происходит:
Методы, влияющие на опции:
addOption(data) — добавление одной записиaddOptions(array) — массовое добавлениеclearOptions() — полная очисткаrefreshOptions(triggerDropdown) — пересборка
спискаПри асинхронной загрузке важна защита от устаревших запросов: результаты старого запроса игнорируются, если пользователь уже изменил ввод.
Поле поиска внутри Tom Select является реактивным фильтром. Каждое изменение текста запускает цепочку:
Фильтрация может быть:
Во втором случае реактивность расширяется за пределы UI и включает сетевой слой.
Реактивность реализуется через событийную модель. Основные события:
change — изменение выбранного значенияitem_add — добавление элементаitem_remove — удаление элементаdropdown_open / dropdown_closetype — ввод текстаload — загрузка данныхКаждое событие отражает конкретный этап изменения состояния и может использоваться для внешней синхронизации.
События генерируются строго после завершения внутреннего обновления, что гарантирует консистентность состояния в момент обработки.
Tom Select не использует полноценный виртуальный DOM, однако применяет локальные оптимизации:
Например, при добавлении одного item не происходит полной перерисовки контейнера — обновляется только соответствующий элемент и счётчики состояния.
В ряде случаев требуется принудительно синхронизировать состояние UI и данных:
Используются методы:
sync() — синхронизация состояния и DOMrefreshItems() — обновление выбранных элементовrefreshOptions() — пересборка спискаupdatePlaceholder() — пересчёт плейсхолдераЭти операции применяются как точечная инвалидация, а не как полная перерисовка компонента.
Реактивная модель предусматривает возможные конфликты:
Стратегия разрешения:
Реактивность напрямую связана с производительностью. Основные оптимизации:
При больших наборах данных ключевым фактором становится не количество элементов, а частота реактивных обновлений. Именно поэтому batching операций критически важен для стабильной работы интерфейса.
Реактивность Tom Select строится как управляемый цикл:
событие → изменение состояния → нормализация → частичное обновление DOM → эмиссия событий
Эта модель обеспечивает предсказуемость поведения даже при сложных сценариях: асинхронной загрузке, динамическом изменении опций и множественных внешних источниках изменений.