Функция Reactive во Vue: как это работает

После jQuery я попробовал AngularJS и был очарован его возможностями. Несколько строк в AngularJS заменяли кучу спегетти-кода в jQuery. Это было похоже на магию. Сейчас все современные Frontend-фреймворки так или иначе обеспечивают реактивность, и это уже никого не удивляет. Тем не менее далеко не все разработчики понимают, как это работает.

Сейчас я работаю с Vue, поэтому и разбираться с тем, как устроены реактивные функции, будем на его примере. Я расскажу, как сделать из простого объекта реактивный, а также немного о том, какие современные возможности JS для этого используются.

Описание проблемы

Допустим, у нас есть объект, в котором хранится информация о количестве товаров на разных складах. Мы хотим знать, сколько их суммарно:

const items = {  store1: 3,  store2: 4, };   let totalCount = 0;   const effect = () => (totalCount = items.store1 + items.store2); effect(); console.log(totalCount); // 7   items.store2 = 23; console.log(totalCount); // 7 - итоговая сумма не поменялась

Такое поведение очевидно для тех, кто работает с JS. Но как быть, если не хочется после каждого изменения объекта вызывать функцию пересчёта? Во Vue есть функция reactive, и выглядит она примерно так:

import { reactive } from 'vue'  // реактивное состояние const items = reactive({    store1: 3,    store2: 4, })  setTimeout(() => {     items.store1 = 10; }, 3000)  return { items }

Теперь где-нибудь в шаблоне выведем сумму товаров на всех складах. После срабатывания setTimeout сумма в шаблоне поменяется:

<template>     <pre>{{items.store1 + items.store2 }}</pre> </template>

Реализуем аналог функции reactive

Я предлагаю написать свою реализацию функции reactive, чтобы понять, как она работает «под капотом». Структура данных будет такой:

здесь:

• targetMap — корневое хранилище наших реактивных объектов; ключом будет объект, который мы хотим сделать реактивным, а значением — depsMap;

• depsMap — словарь со всеми зависимостями конкретного поля, поэтому в качестве ключа у неё поле объекта, который мы хотим сделать реактивным, а в качестве значения — сами зависимости;

• deps — Set со всем зависимостями конкретного поля.

Попробуем реализовать это в коде. Допустим, у нас есть объект items, который хранит в себе информацию о том, сколько объектов лежит на каждом из складов.

const items = {   store1: 3,   store2: 4, };  let totalCount = 0;  const effect = () => (totalCount = items.store1 + items.store2);  // Создаем корневое хранилище для реактивного объекта const targetMap = new WeakMap();  // Функция track будет начинать отслеживание изменений в конкретном поле объекта function track(target, key) {   let depsMap = targetMap.get(target);   if (!depsMap) {     targetMap.set(target, (depsMap = new Map()));   }    let deps = depsMap.get(key);   if (!deps) {     depsMap.set(key, (deps = new Set()));   }   deps.add(effect); }  // Начинаем отслеживать изменения в обоих полях объекта items track(items, 'store1'); track(items, 'store2');  // Функция trigger будет запускаться каждый раз, когда происходят какие-то изменения в поле объекта function trigger(target, key) {   const depsMap = targetMap.get(target);   if (!depsMap) return;   const deps = depsMap.get(key);   if (!deps) return;   deps.forEach((_effect) => _effect()); }  // Запускаем нашу функцию, чтобы обновить значение переменной totalCount effect();  console.log(totalCount); // 7  // Обновляем количество айтемов на одном из складов items.store2 = 23;  // Оповещаем об этом при помощи функции. trigger(items, 'store2');  // Проверяем, что totalCount пересчиталась console.log(totalCount); // 26

По-моему, прекрасно: целая страница кода ради функциональности, которую можно описать тремя строчками кода 🙂 Но это только первая итерация, давайте улучшать. Проблемы этого решения:

• чтобы отслеживать изменения, необходимо вручную добавлять каждое поле каждого объекта;

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

Для решения этих проблем воспользуемся современными инструментами, которые нам предоставляет JS, а именно Proxy и Reflect.

Reflect

Предположим, у нас есть объект user:

const user = { name: 'Alex', age: 32 }

Существует три способа обратиться к полю age:

console.log(user.age); console.log(user['age']); сonsole.log(Reflect.get(user, 'age'));

Все три вернут значение, но у Reflect.get есть дополнительное преимущество в виде третьего аргумента receiver, который мы будем использовать совместно с Proxy. Если коротко, то receiver — это прокси или объект, унаследованный от прокси.

Больше информации о Reflect API можно найти в этой статье, но если коротко, Reflect API — это такая обёртка для манипуляций с объектом.

Proxy

Proxy — это объект, который оборачивается вокруг другого объекта и позволяет перехватывать запросы к нему (target), модифицируя их.

Для примера опять воспользуемся объектом user, а также создадим объект handler, который будет иметь два метода — get и set, и передадим его в новый экземпляр Proxy.

const user = { name: 'Alex', age: 32 }  const handler = { get(target, key, receiver) {  console.log('Was called Get method with key: ' + key); return Reflect.get(target, key, receiver) },  set(target, key, val, receiver) { console.log('Was called Set method with key: ' + key + ' and velue: ' + val); return Reflect.set(target, key, val, receiver); } }  user = new Proxy(user, handler);  console.log(user.name); // Was called Get method with key: name // Alex  console.log((user.age = 33)); // Was called Set method with key: age and value 33 // 33

Пара уточнений по коду: я специально записал proxy-обёртку над объектом user в ту же переменную, поскольку в таком случае можно быть уверенным, что нигде не используется оригинальный объект. В данном случае receiver сохраняет контекст this для тех объектов, которые имеют унаследованные от других объектов области или функции.

Для более глубокого понимания вот пара статей на тему JS Proxy:

• https://learn.javascript.ru/proxy

• https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Global_Objects/Proxy

Используем проксирование запросов к исходному объекту

Теперь понимая, как работает Proxy и Reflect, применим их для создания реактивного объекта.

Давайте наконец напишем функцию reactive, а внутри неё создадим handler, аналогичный тому, который мы писали в примере с Proxy. Сам handler я предлагаю немного модифицировать и добавить Getter-функцию track, а в Setter — проверку на факт отличия нового значения от предыдущего, и если это действительно так, то запускать trigger().

const targetMap = new WeakMap();  function track(target, key) {   let depsMap = targetMap.get(target); if(!depsMap){ targetMap.set(target, (depsMap = new Map())); }    let deps = depsMap.get(key); if(!deps) { depsMap.set(key, (deps = new Set())); }    deps.add(effect); }  function trigger(target, key) {   const depsMap = targetMap.get(target);   if (!depsMap) return;   const deps = depsMap.get(key);   if (!deps) return;   deps.forEach((_effect) => _effect()); }  const reactive = (target) => {   const handler = {     get: (target, key, receiver) => { const d = Reflect.get(target, key, receiver)       track(target, key);       return d;     },     set: (target, key, value, receiver) => { const oldVal = target[key]; const newVal = Reflect.set(target, key, val, receiver); oldVal !== newVal && trigger(_target, key);       _target[key] = value;        return newVal;     },   };    return new Proxy(target, handler); };  let totalCount = 0;  const effect = () => (totalCount = items.store1 + items.store2);  let items = reactive({   store1: 3,   store2: 4, });   effect(); // нужно запустить effect для того, чтобы прочитать поля из объекта и запустить отслеживание  items.store1 = 44; // устанавливаем новое значение console.log(totalCount); // 48  items.store2 = 24; // устанавливаем новое значение для второго поля console.log(totalCount); //68

Отлично, этот пример уже больше похож на реактивную функцию, но мне по-прежнему не нравится, что перед использованием необходимо вручную запускать функцию effect(). Исправим это дополнительной переменной activeEffect:

let activeEffect = null;  function effect(eff) { activeEffect = eff; // устанавливаем новое значение activeEffect activeEffect(); // запускаем новое значение  activeEffect = null; // отменяем установку  }

Теперь давайте перепишем объявление функции effect:

// Напомню она выглядела вот так  const effect = () => (totalCount = items.store1 + items.store2);  // Теперь она будет выглядеть так effect(() => { totalCount = items.store1 + items.store2 })

И теперь отдельный вызов effect() можно удалить, но при этом нам необходимо модифицировать функцию track:

function track(target, key) { if(!activeEffect) return // добавляем проверку     let depsMap = targetMap.get(target);   !depsMap && targetMap.set(target, (depsMap = new Map()));    let deps = depsMap.get(key);   !deps && depsMap.set(key, (deps = new Set()));    deps.add(activeEffect); // добавляем ее в хранилище }

Итоговый код получился такой:

const targetMap = new WeakMap(); let activeEffect = null;  function effect(eff) {   activeEffect = eff;   activeEffect();   activeEffect = null; }  function track(target, key) {   if (activeEffect) {     let depsMap = targetMap.get(target);     !depsMap && targetMap.set(target, (depsMap = new Map()));      let deps = depsMap.get(key);     !deps && depsMap.set(key, (deps = new Set()));      deps.add(activeEffect);   } } function trigger(target, key) {   const depsMap = targetMap.get(target);   if (!depsMap) return;   const deps = depsMap.get(key);   if (!deps) return;   deps.forEach((_effect) => _effect()); }  const reactive = (target) => {   const handler = {     get: (target, key, receiver) => {       const d = Reflect.get(target, key, receiver);       track(target, key);       return d;     },     set: (target, key, value, receiver) => {       const oldVal = target[key];       const newVal = Reflect.set(target, key, value, receiver);       oldVal !== newVal && trigger(target, key);       target[key] = value;        return newVal;     },   };    return new Proxy(target, handler); };  let totalCount = 0;  let items = reactive({   store1: 3,   store2: 4, });  effect(() => {   totalCount = items.store1 + items.store2; });  items.store1 = 44; // устанавливаем новое значение console.log(totalCount); // 48 items.store2 = 24; // устанавливаем новое значение для второго поля console.log(totalCount); //68

Заключение

Эта реализация функции Reactive очень похожа на реализацию в  Vue 3. Если вы работаете с Vue, то очень советую познакомиться с тем, как функция написана в библиотеке, а эта статья поможет вам разобраться. 

P.S. Кстати, реактивные функции, используемые во Vue, можно использовать отдельно от всего фреймворка.