Реализуйте упрощённую функцию `reactive(object)`, имитирующую Vue 3: при чтении свойства должна вызываться `track(target, key)`, а при изменении свойства — `trigger(target, key)`.

Для упрощённой реактивности нужен Proxy с get для track и set для trigger при успешном изменении свойства.

Короткий ответ

Что ответить на собеседовании

Для упрощённой реактивности нужен Proxy с get для track и set для trigger при успешном изменении свойства.

Подробный разбор

Ответ с пояснениями

Для упрощённой реактивности нужен Proxy с get для track и set для trigger при успешном изменении свойства.

Пример поверхностной обёртки обычного объекта:

function reactive(object) {
  return new Proxy(object, {
    get(target, key, receiver) {
      track(target, key);
      return Reflect.get(target, key, receiver);
    },
    set(target, key, value, receiver) {
      const existed = Object.prototype.hasOwnProperty.call(target, key);
      const oldValue = Reflect.get(target, key, receiver);
      const success = Reflect.set(target, key, value, receiver);
      if (success && (!existed || !Object.is(oldValue, value))) trigger(target, key);
      return success;
    }
  });
}

Это не полный Vue: здесь нет глубокой обёртки, кеша Proxy, delete/iteration, специальных коллекций и планировщика. track/trigger предполагаются предоставленными снаружи.

ИИ-помощник для собеседований

Хочешь уверенно проходить собеседования?

Попробуй ИИ-помощник для собеседований: слышит вас и собеседника, анализирует экран, подсказывает ответы в реальном времени, работает без VPN и не попадает в захват экрана.

Подробнее