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

Реактивность во Vue.js основана на системе отслеживания зависимостей property.

При создании экземпляра Vue, данные в data преобразуются в реактивные. Для примитивов (string, number, boolean) используется Object.defineProperty (во Vue 2) или Proxy (во Vue 3) для перехвата операций get и set. Для объектов и массивов также применяется обход свойств и замена методов массива, чтобы они уведомляли об изменениях.

Когда свойство читается в template или computed property, создается зависимость. Внутренний механизм Vue (Watcher) запоминает, какой watcher зависит от данного свойства.

При изменении реактивного свойства, его сеттер уведомляет всех зависимых watcher'ов. Watcher'ы, в свою очередь, запускают пересчет computed properties или перерисовку компонентов.

Во Vue 3 используется Proxy API, что обеспечивает более полную реактивность, включая добавление, удаление и изменение элементов массива по индексу.

Ключевые компоненты:

• Observer/Reactive Proxy: Преобразует данные в реактивные, отслеживая get и set.
• Dep (Dependency): Класс, который собирает watcher'ы, зависящие от конкретного свойства.
• Watcher: Сущность, которая следит за изменением свойства и запускает действие (пересчет или перерисовка).

Пример работы во Vue 2 с Object.defineProperty:

javascript

Пример работы во Vue 3 с Proxy:

javascript