Для упрощённой реактивности нужен Proxy с get для track и set для trigger при успешном изменении свойства.
Реализуйте упрощённую функцию `reactive(object)`, имитирующую Vue 3: при чтении свойства должна вызываться `track(target, key)`, а при изменении свойства — `trigger(target, key)`.
Для упрощённой реактивности нужен 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 предполагаются предоставленными снаружи.