Proxy - объект, появившийся в JavaScript начиная с ES6, и позволяющий сделать над объектом "обертку" для перехвата операций get, set, defineProperty и некоторых других.

Именно он используется во Vue 3 Reactivity API для реализации Reactive (и Ref на объектах).

Однако за это приходится платить производительностью. Доступ к свойству объекта через Proxy примерно в 30 раз медленней, чем просто к свойству объекта.

let sum = 0

// 1. proxy access
const point = new Proxy({ x: 10, y: 20 }, { get: (t, k) => t[k] })
 
for (let i = 0; i < 100_000; i++) { sum += point.x }

// 2. direct access
const point = { x: 10, y: 20 }
 
for (let i = 0; i < 100_000; i++) { sum += point.x }

Это из-за того, что Proxy плохо поддаётся JIT оптимизации.

Разница в производительности простого объекта с Reactive будет еще больше.

Поэтому использовать ref/reactive на статичных данных или данных, которым не нужна реактивность (например, для хранения JWT токена в сторе) - не очень разумно.

#tip #performance #benchmark #proxy #reactive

Предложение добавить Signals в JavaScript перешло в Stage 1 процесса комитета TC39
Это означает, что члены комитета соблаговолили взглянуть на пропозал. Заняло это у них 8 месяцев.

Signals - аналог реактивных переменных и операций над ними (computed, watcher) во Vue 3, только сильно урезанный по сравнению с Reactivity API. Evan You говорил, что если они появятся в языке, реактивность Vue может быть переписана на них.

Честно говоря, реактивность естественней выглядит внешней библиотекой, нежели частью языка программирования. И вряд ли этот стандарт позволит уменьшить огромное число реактивных имплементаций на текущий день, то есть, унифицировать эту область.

Так же не сильно поможет это и для Web components догнать фронтенд фреймворки, потому что там нет связывания js переменных с шаблоном.

#signals #reactive #js