Движок реактивности 3.6: alien-signals

Команда обновляет крупную админку с Vue 3.4 на 3.6 и не меняет ни строчки в компонентах: те же ref, computed, watch. После апдейта тяжёлая страница с тысячами реактивных узлов начинает рендериться заметно быстрее, а потребление памяти на подписках падает. Причина в том, что в 3.6 ядро реактивности полностью заменили на библиотеку alien-signals. Прикладной API остался прежним - изменился алгоритм под ним.

• Большие админки и дашборды с тысячами реактивных привязок выигрывают в скорости рендера без изменений в коде
• Приложения с массой computed-цепочек: новый алгоритм дешевле распространяет изменения по графу зависимостей
• Высокочастотные обновления (потоки данных, анимации на состоянии) меньше нагружают подписки
• Команды, которые обновляются с Vue 3.x на 3.6: профит в производительности при нулевой миграции кода
• Библиотеки на реактивности Vue (Pinia, VueUse) получают ускорение автоматически, так как стоят на том же ядре

Предварительные знания

• Понимание модели реактивности Vue: ref, computed, watch и отслеживание зависимостей
• Идея графа зависимостей: эффект подписан на источники, изменение источника уведомляет эффекты
• Базовое представление о версиях Vue 3 и обратной совместимости

Что именно поменялось в 3.6

Реактивность Vue с самого начала 3.x строилась на собственной системе effect и dep: каждый реактивный источник вёл список зависимых эффектов, каждый эффект - список источников. Эта модель работала, но накапливала издержки на больших графах зависимостей: учёт подписок, очистка устаревших связей, повторные проходы. В Vue 3.6 это ядро заменили на alien-signals - отдельную библиотеку реализации сигналов, написанную с упором на минимум аллокаций и быстрый обход графа.

Важно различать два слоя. Верхний слой - публичный API: ref, reactive, computed, watch. Он не изменился. Нижний слой - алгоритм, который связывает источники и эффекты и распространяет изменения. Именно его заменили. С точки зрения компонента всё выглядит так же, потому что API остался прежним поверх нового движка.

alien-signals выросла из экспериментов по эффективным сигналам и была доведена до уровня, на котором команда Vue решила сделать её внутренним движком. Это редкий случай, когда ядро фреймворка заменяется целиком без изменения внешнего контракта.

Почему alien-signals быстрее

alien-signals реализует push-pull модель сигналов с компактным учётом зависимостей. При изменении источника он не пересчитывает зависимые значения сразу, а помечает их как потенциально устаревшие (push), и фактический пересчёт происходит при чтении (pull). Связи между источниками и эффектами хранятся в структурах, которые требуют меньше аллокаций и обходятся быстрее, чем прежняя система списков. На больших графах зависимостей это даёт ощутимую экономию времени и памяти.

Числа из бенчмарков команды Vue: 3.6 монтирует порядка 100 000 компонентов примерно за 100 мс, а обновления и снятие подписок стали заметно легче по сравнению с 3.5. Точные цифры зависят от сценария и железа, но направление однозначное: новый движок снижает накладные расходы реактивности там, где их больше всего - на массовых обновлениях и длинных цепочках computed.

Главный выигрыш - на приложениях с большим числом реактивных узлов и связей. На маленькой форме разницу заметить трудно, потому что там издержки реактивности и так пренебрежимы. Эффект масштабируется с размером графа зависимостей.

Что остаётся неизменным для кода

Главная новость 3.6 для прикладного разработчика парадоксальна: делать ничего не нужно. Весь публичный API реактивности сохранил и сигнатуры, и поведение. ref остаётся ref, computed по-прежнему ленив и кэширует, watch и watchEffect срабатывают по тем же правилам, эффекты так же привязаны к жизненному циклу компонента и областям. Миграция с Vue 3.x на 3.6 не требует переписывать компоненты ради нового движка.

Из этого следует практический вывод про дисциплину реактивности. shallowRef, markRaw и грамотный выбор между глубокой и поверхностной реактивностью остаются актуальными. Быстрый движок снижает базовую стоимость, но не делает бесплатным оборачивание 50 000 объектов в Proxy. Архитектурные решения о том, что должно быть реактивным, по-прежнему за разработчиком.

Смена ядра без смены API - это про эволюцию без боли миграции. Vue 3 с самого начала держал обещание стабильности публичного контракта, и замена движка на alien-signals подтверждает этот подход: производительность растёт, а код приложений остаётся прежним.

Связь с другими темами

Урок завершает блок про внутренности реактивности:

• Глубокая реактивность — Здесь разбирается, как именно ядро отслеживания зависимостей сменилось в 3.6
• effectScope — Ещё один взгляд на скрытую механику реактивности, на которой стоит прикладной код
• shallowRef и markRaw — Даже с быстрым ядром дисциплина для тяжёлых данных не теряет смысла

Итог

• Vue 3.6 (в бете) переписывает внутреннее ядро реактивности на библиотеку alien-signals, сохраняя прежний публичный API
• alien-signals - это эффективная реализация сигналов с push-pull моделью распространения изменений и компактным учётом зависимостей
• Результат - заметное ускорение: по бенчмаркам Vue 3.6 монтирует около 100 000 компонентов примерно за 100 мс и экономит память на подписках
• Для прикладного кода ничего не меняется: ref, reactive, computed, watch, watchEffect работают с тем же поведением
• Это смена реализации, а не API, поэтому миграция с 3.x на 3.6 не требует переписывания компонентов

Связанные уроки

• vue-18-reactivity-deep — Чтобы оценить смену ядра, нужно понимать прежнюю модель отслеживания зависимостей через effect и dep
• vue-22-effect-scope — Оба урока про внутреннее устройство реактивности, которое почти не видно прикладному коду
• vue-19-shallow-raw — Даже с быстрым ядром дисциплина shallow и markRaw остаётся актуальной для тяжёлых данных