Что такое реактивность?

В наши дни этот термин довольно часто встречается в программировании, но что люди имеют в виду, когда говорят его? Реактивность — это парадигма программирования, которая позволяет нам декларативно приспосабливаться к изменениям.

Как работает реактивность в Vue

Мы не можем отслеживать чтение и запись локальных переменных, как в примере. В ванильном JavaScript просто нет механизма для этого. Однако мы можем перехватить чтение и запись свойств объекта
В JavaScript существует два способа перехвата доступа к свойствам: геттеры / сеттеры и прокси . Vue 2 использовал геттеры/сеттеры исключительно из-за ограничений поддержки браузера. В Vue 3 прокси используются для реактивных объектов, а геттеры / сеттеры — для ссылок. Вот некоторый псевдокод, иллюстрирующий, как они работают
Важно
Фрагменты кода здесь и ниже предназначены для объяснения основных концепций в максимально простой форме, поэтому многие детали опущены, а крайние случаи игнорируются.
Это объясняет некоторые ограничения реактивных объектов
  • Когда вы присваиваете или деструктурируете свойство реактивного объекта локальной переменной, доступ к этой переменной или присвоение ей является нереактивным, поскольку оно больше не запускает ловушки прокси-сервера get/set на исходном объекте. Обратите внимание, что это «отключение» влияет только на привязку переменной — если переменная указывает на непримитивное значение, такое как объект, изменение объекта все равно будет реактивным.
  • Возвращенный прокси из reactive(), хотя и ведет себя так же, как оригинал, имеет другую идентичность, если мы сравниваем его с оригиналом с помощью оператора ===
Внутри track() мы проверяем, есть ли текущий эффект. Если он есть, мы ищем эффекты подписчика (хранящиеся в наборе) для отслеживаемого свойства и добавляем эффект в набор:
Подписки на эффекты хранятся в глобальной WeakMap target, Mapkey, Seteffect структуре данных. Если для свойства не найден набор эффектов подписки (отслеживается впервые), он будет создан. getSubscribersForProperty() Вкратце, это то, что делает функция. Для простоты мы опустим его детали.
Внутри trigger() мы снова ищем эффекты подписчика для свойства. Но на этот раз вместо этого мы вызываем их:
Теперь вернемся к whenDepsChange() функции:
Он оборачивает необработанную updateфункцию в эффект, который устанавливается в качестве текущего активного эффекта перед запуском фактического обновления. Это позволяет track() вызовам во время обновления найти текущий активный эффект.
На этом этапе мы создали эффект, который автоматически отслеживает свои зависимости и повторно запускается при изменении зависимости. Мы называем это реактивным эффектом
Vue предоставляет API, который позволяет создавать реактивные эффекты: watchEffect(). На самом деле, вы, возможно, заметили, что это работает очень похоже на магию whenDepsChange() в примере. Теперь мы можем переработать исходный пример, используя реальные API Vue:
Использование реактивного эффекта для изменения ссылки — не самый интересный вариант использования — на самом деле использование вычисляемого свойства делает его более декларативным:
Внутренне computed управляет его аннулированием и повторным вычислением, используя реактивный эффект.
Так каков пример распространенного и полезного реактивного эффекта? Что ж, обновляем DOM! Мы можем реализовать простой «реактивный рендеринг» следующим образом:
Фактически, это очень похоже на то, как компонент Vue синхронизирует состояние и DOM — каждый экземпляр компонента создает реактивный эффект для рендеринга и обновления DOM. Конечно, компоненты Vue используют гораздо более эффективные способы обновления DOM, чем innerHTML

Время выполнения и реактивность во время компиляции​

Система реактивности Vue в основном основана на среде выполнения: все отслеживание и запуск выполняются во время выполнения кода непосредственно в браузере. Плюсы реактивности во время выполнения заключаются в том, что она может работать без этапа сборки и меньше крайних случаев. С другой стороны, это накладывает ограничения на синтаксис JavaScript, что приводит к необходимости использования контейнеров значений, таких как ссылки Vue.
Некоторые фреймворки, такие как Svelte , предпочитают преодолевать такие ограничения, реализуя реактивность во время компиляции. Он анализирует и преобразует код, чтобы имитировать реактивность. Этап компиляции позволяет платформе изменять семантику самого JavaScript — например, неявно внедряя код, который выполняет анализ зависимостей и запускает эффекты, связанные с доступом к локально определенным переменным. Обратной стороной является то, что такие преобразования требуют этапа сборки, а изменение семантики JavaScript по сути означает создание языка, который выглядит как JavaScript, но компилируется во что-то другое.
Команда Vue исследовала это направление с помощью экспериментальной функции под названием Reactivity Transform, но в конце концов мы решили, что она не подходит для проекта из-за приведенных

# Отладка реактивности

# Хуки отладки компонентов

# Вычислительная отладка

# Отладка наблюдателя

Интеграция с внешними государственными системами

Неизменяемые данные

State Machines

# RxJS

Подключение к сигналам​

По сути, сигналы — это тот же тип примитива реактивности, что и ссылки Vue. Это контейнер значений, который обеспечивает отслеживание зависимостей при доступе и срабатывание побочных эффектов при мутации. Эта парадигма, основанная на реактивных примитивах, не является особенно новой концепцией в мире внешнего интерфейса: она восходит к таким реализациям, как Knockout observables и Meteor Tracker , появившимся более десяти лет назад. API Vue Options и библиотека управления состоянием React MobX также основаны на тех же принципах, но скрывают примитивы за свойствами объекта.
Хотя это не является обязательным признаком для того, чтобы что-то можно было квалифицировать как сигнал, сегодня эта концепция часто обсуждается вместе с моделью рендеринга, где обновления выполняются посредством детальных подписок. Из-за использования Virtual DOM Vue в настоящее время полагается на компиляторы для достижения аналогичной оптимизации . Однако мы также изучаем новую стратегию компиляции, вдохновленную Solid (режим Vapor), которая не полагается на Virtual DOM и использует больше преимуществ встроенной системы реактивности Vue.

# Компромиссы при проектировании API

Дизайн сигналов Preact и Qwik очень похож на smallRef в Vue: все три предоставляют изменяемый интерфейс через .value свойство. Мы сосредоточим обсуждение на сигналах Solid и Angular.

# Твердые сигналы

В дизайне API Solid createSignal() особое внимание уделяется разделению чтения и записи. Сигналы предоставляются как геттер, доступный только для чтения, и отдельный сеттер:
Обратите внимание, как count сигнал может передаваться без установщика. Это гарантирует, что состояние никогда не сможет быть изменено, если только установщик не будет явно предоставлен. Оправдывает ли эта гарантия безопасности более подробный синтаксис, может зависеть от требований проекта и личного вкуса — но если вы предпочитаете этот стиль API, вы можете легко воспроизвести его в Vue:

# Угловые сигналы

Angular претерпевает некоторые фундаментальные изменения: отказ от грязных проверок и введение собственной реализации примитива реактивности. API Angular Signal выглядит следующим образом:
Опять же, мы можем легко скопировать API в Vue:
По сравнению с ссылками Vue, стиль API Solid и Angular, основанный на геттерах, обеспечивает некоторые интересные компромиссы при использовании в компонентах Vue:
  • () немного менее подробно, чем .value, но обновление значения более подробно.
  • Развертывание ссылок отсутствует: для доступа к значениям всегда требуется (). Это делает доступ к значениям единообразным повсюду. Это также означает, что вы можете передавать необработанные сигналы в качестве свойств компонента.
Подходят ли вам эти стили API, в некоторой степени субъективно. Наша цель — продемонстрировать основное сходство и компромиссы между этими различными конструкциями API. Мы также хотим показать, что Vue является гибким: вы не привязаны к существующим API. При необходимости вы можете создать свой собственный примитивный API реактивности для удовлетворения более конкретных потребностей.
Возможности CSS SFCТестФункции рендеринга и JSX