Привет, Хабр.

Это моя первая статья здесь. Долгое время не решался что-то публиковать, хотя регулярно читал и разбирал материалы других авторов.

Для первой публикации я выбрал тему внутренней оптимизации реактивности во Vue 3 — trackOpBits и работу ReactiveEffect. Этот механизм почти не заметен при обычной работе с фреймворком, но он напрямую влияет на производительность рендера компонентов и поведение вложенных computed.

В статье разберём, какую проблему решает trackOpBits, как именно он используется внутри системы реактивности и почему эта оптимизация важна в реальных приложениях.

Кратко о ReactiveEffect

В Vue 3 любая реактивная логика завязана на ReactiveEffect:

  • рендер компонента

  • computed

  • watchEffect

  • watch

Все они внутри — effect’ы.

Упрощённо:

class ReactiveEffect {
  fn
  deps = []
  active = true
  trackOpBits = 0
}

Во время выполнения fn effect становится активным, и все обращения к реактивным данным регистрируются как зависимости.

Где возникает реальная проблема

Посмотрим на реальный сценарий, который происходит в каждом Vue-приложении.

Пример: компонент + computed + computed

const state = reactive({
  price: 100,
  count: 2,
  tax: 0.2
})

const total = computed(() => {
  return state.price * state.count
})

const totalWithTax = computed(() => {
  return total.value * (1 + state.tax)
})

А теперь представим компонент:

const Comp = {
  setup() {
    return () => {
      return h('div', totalWithTax.value)
    }
  }
}

Что реально происходит при первом рендере:

  1. Создаётся render effect компонента

  2. Внутри рендера читается totalWithTax.value

  3. totalWithTax — это computed, у него свой effect

  4. Внутри totalWithTax читается total.value

  5. total — ещё один computed, ещё один effect

  6. Внутри total читаются: state.price, state.count

Итого, мы имеем вложенность effect’ов глубиной 3:

render effect
 └─ computed(totalWithTax)
     └─ computed(total)
         └─ reactive state

Что пойдёт не так без оптимизаций

Наивная реализация реактивности делала бы следующее:

  • каждый get: добавляет activeEffect в dep

  • каждый effect: при новом запуске очищает все deps и пересобирает их заново

При вложенных effect’ах это означает:

  • повторные добавления одного и того же effect’а

  • лишние проверки

  • постоянные cleanup даже там, где зависимости не менялись

На больших деревьях компонентов и сложных computed это быстро становится дорогой операцией.

effectTrackDepth — контроль глубины

Во Vue 3 есть глобальный счётчик:

let effectTrackDepth = 0

Каждый раз, когда начинается выполнение effect’а:

effectTrackDepth++

А при завершении — уменьшается.

Это позволяет Vue понимать, на каком уровне вложенности сейчас идёт сбор зависимостей.

Что такое trackOpBits

trackOpBits — это битовая маска, хранящая информацию о том,
на каких уровнях глубины effect уже был зарегистрирован в зависимостях.

Для текущей глубины вычисляется бит:

const trackOpBit = 1 << effectTrackDepth

Этот бит используется как флаг.

Как это работает на практике

Когда выполняется track(dep):

  1. Vue проверяет: есть ли у effect’а trackOpBit для текущей глубины

  2. Если бит уже установлен: effect не добавляется повторно в dep

  3. Если бита нет: effect добавляется и выставляется бит

if (!(effect.trackOpBits & trackOpBit)) {
  dep.add(effect)
  effect.trackOpBits |= trackOpBit
}

Таким образом:

  • один и тот же effect не может быть добавлен дважды

  • Vue избегает лишних операций при вложенных вычислениях

Почему это особенно важно для computed

computed во Vue 3:

  • ленивые

  • кешируемые

  • могут вызываться из других computed и из рендера

Без trackOpBits каждый доступ к .value во вложенных цепочках приводил бы к:

  • повторному трекингу

  • очистке зависимостей

  • лишним аллокациям

С битовой маской:

  • зависимости собираются один раз на уровень

  • повторные чтения становятся почти бесплатными

Ограничение по глубине

Во Vue 3 есть ограничение на максимальную глубину, где используется битовая оптимизация
(на момент написания — 30 уровней).

После этого Vue аккуратно откатывается к более простой логике трекинга, без битов. Это сделано, чтобы:

  • избежать переполнения битовой маски

  • сохранить предсказуемое поведение

На практике в обычных приложениях до этого лимита почти никогда не доходят.

Почему этого не было во Vue 2

Во Vue 2:

  • реактивность строилась на Object.defineProperty

  • не было ReactiveEffect в текущем виде

  • не было чёткого контроля вложенности эффектов

Архитектура Vue 3 (Proxy + эффекты) позволила:

  • отслеживать глубину

  • использовать битовые маски

  • минимизировать работу GC и аллокации

trackOpBits — пример оптимизации, которая стала возможной только после полной переработки реактивности.

Нужно ли это знать обычному разработчику

Скорее нет — Vue отлично работает и без этого знания.

Но если вы:

  • дебажите странные перерендеры

  • пишете сложные computed

  • работаете с производительностью

  • или просто хотите понимать, что происходит под капотом

— знание таких деталей сильно упрощает мышление о поведении фреймворка.

Заключение

trackOpBits — маленькая, но очень важная часть реактивности Vue 3.
Она позволяет:

  • эффективно работать с вложенными effect’ами

  • избежать лишнего трекинга

  • сделать computed и рендер компонентов действительно быстрыми

Именно такие низкоуровневые решения создают ощущение, что Vue 3 «просто летает», даже в больших приложениях.

Если тема будет интересна — можно отдельно разобрать:

  • scheduler эффектов

  • очереди pre / post flush

  • или жизненный цикл рендер effect’а компонента

Спасибо за внимание.