Vue.js: Reactivity Deep Dive

// ❌ Broken version: deep reactive over 100,000 rows
const { ref } = Vue

const products = ref([
  { id: 1, name: 'Product 1', price: 99, ... },
  // ... 10,000 items ...
])

// Vue creates a Proxy for every property and nested object
// Memory usage: 100MB+
// First render: 3 seconds
// Scrolling: 10 FPS (janky)

const { shallowRef, markRaw } = Vue

// ✅ shallowRef: only tracks replacement of .value as a whole
const products = shallowRef([
  { id: 1, name: 'Product 1' },
  // ... 10,000 items (never wrapped in a Proxy) ...
])

// ✅ markRaw: mark an object as never reactive (fastest)
const staticConfig = markRaw({
  apiUrl: 'https://api.example.com',
  version: '1.0'
})

// Replace the whole value
products.value = await fetchProducts()  // triggers exactly 1 update

// Basic Proxy example
const target = { name: 'Alice', age: 25 }

const proxy = new Proxy(target, {
  get(target, key) {
    console.log(`Read ${key}`)
    return Reflect.get(target, key)
  },
  set(target, key, value) {
    console.log(`Write ${key} = ${value}`)
    return Reflect.set(target, key, value)
  }
})

proxy.name  // logs "Read name", returns 'Alice'
proxy.age = 26  // logs "Write age = 26"

// Simplified version of the reactivity package inside Vue 3
function reactive(target) {
  return new Proxy(target, {
    get(target, key, receiver) {
      // 1. Dependency collection: record who is using this property
      track(target, key)
      
      // 2. Recursive wrapping: nested objects become reactive too
      const value = Reflect.get(target, key, receiver)
      if (isObject(value)) {
        return reactive(value)
      }
      return value
    },
    set(target, key, value, receiver) {
      // 1. Set the value
      const oldValue = target[key]
      const result = Reflect.set(target, key, value, receiver)
      
      // 2. Trigger updates: notify everyone using this property
      if (oldValue !== value) {
        trigger(target, key)
      }
      return result
    }
  })
}

Three bordered panels stack vertically. Panel 1 shows true, true, false in green tags.
Panel 2 shows state.count = 0 and a button that increments it to 1, 2, 3… Panel 3 shows users[0]: Alice;
clicking the first button changes the data to Bob but the page still says Alice, while clicking Trigger manually with triggerRef re-renders and shows Bob.

1. isRef / isReactive checks
Is count a ref?       [true]
Is state reactive?    [true]
Is plain a ref?       [false]

2. toRaw gets the original object (strips the Proxy)
state.raw === state?  [false]
state.count = 0
[ +1 to state.count ]        → 1, 2, 3 ...

3. shallowRef (shallow) + triggerRef (manual trigger)
users[0]: Alice
[ Change users[0].name (no update) ]   → still shows Alice
[ Trigger manually with triggerRef ]   → now shows Bob

// Vue 3's internal data structure
const targetMap = new WeakMap()
// targetMap = { obj1: Map1, obj2: Map2, ... }
// Map1 = { key1: Set1, key2: Set2, ... }
// Set1 = Set<activeEffect1, activeEffect2, ...>

function track(target, key) {
  // 1. Get the Map for this target
  let depsMap = targetMap.get(target)
  if (!depsMap) {
    depsMap = new Map()
    targetMap.set(target, depsMap)
  }
  
  // 2. Get the Set for this key
  let dep = depsMap.get(key)
  if (!dep) {
    dep = new Set()
    depsMap.set(key, dep)
  }
  
  // 3. Record the currently active effect
  if (activeEffect) {
    dep.add(activeEffect)
  }
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return
  
  const dep = depsMap.get(key)
  if (dep) {
    // Notify every dependency to run again
    dep.forEach(effect => effect.run())
  }
}

// Vue 3's internal ref implementation
class RefImpl {
  constructor(value) {
    this._value = isObject(value) ? reactive(value) : value
  }
  
  get value() {
    // 1. track
    track(this, 'value')
    return this._value
  }
  
  set value(newValue) {
    // 1. Compare old and new values
    if (hasChanged(this._value, newValue)) {
      this._value = isObject(newValue) ? reactive(newValue) : newValue
      // 2. trigger
      trigger(this, 'value')
    }
  }
}

function ref(value) {
  return new RefImpl(value)
}

// Simplified implementation of Vue 3 computed
function computed(getter) {
  const ref = {
    // 1. Cached value
    _value: undefined,
    
    // 2. Whether it's stale (needs recomputing)
    _dirty: true,
    
    // 3. getter
    get value() {
      // Lazy evaluation: only compute on first access
      if (this._dirty) {
        this._value = effect(getter)  // collect dependencies
        this._dirty = false
      }
      
      // 4. track (who is using me)
      track(this, 'value')
      return this._value
    }
  }
  
  // 5. Mark dirty when a dependency changes
  effect(() => getter()).scheduled = () => {
    ref._dirty = true
    trigger(ref, 'value')  // trigger components that use this computed
  }
  
  return ref
}

const count = ref(0)
const double = computed(() => count.value * 2)

console.log(double.value)  // 0 (first computation)
console.log(double.value)  // 0 (cached, not recomputed)
count.value = 5
console.log(double.value)  // 10 (recomputed)

const { shallowRef, triggerRef } = Vue

const products = shallowRef([
  { id: 1, name: 'iPhone', price: 999 },
  { id: 2, name: 'MacBook', price: 2499 }
])

// ❌ No reactivity (mutating a property inside .value)
products.value[0].name = 'iPad'
// No update is triggered (shallowRef only tracks replacing .value wholesale)

// ✅ Triggers an update (whole-value replacement)
products.value = [...products.value, { id: 3, name: 'iPad' }]

// ✅ Force it (trigger manually after an internal mutation)
products.value[0].name = 'iPad'
triggerRef(products)

const { shallowReactive } = Vue

const state = shallowReactive({
  user: { name: 'Alice' },
  settings: { theme: 'dark' }
})

// ✅ Reactive: top-level property changes
state.user = { name: 'Bob' }

// ❌ Not reactive: nested properties
state.user.name = 'Charlie'

const { markRaw, reactive } = Vue

// Third-party library instances (ECharts, Mapbox) don't need reactivity
const map = markRaw(new Map())
const chart = markRaw(echarts.init(element))

const state = reactive({
  map,    // ✅ Never wrapped in a Proxy
  chart   // ✅ 30% faster
})

const { triggerRef, isRef, isReactive, isReadonly, isProxy, toRaw, markRaw } = Vue

// 1. Print dependencies with watchEffect
watchEffect(() => console.log('deps:', { a: state.a, b: state.b }))

// 2. Trigger an update manually
triggerRef(stateRef)

// 3. Inspect reactivity state
isReactive(obj)   // true/false
isRef(refObj)     // true/false

// 4. Original object (Proxy removed)
const raw = toRaw(reactiveObj)

// 5. Performance marking
const fast = markRaw(expensiveObj)

A deps: { a: ..., b: ...
} line is logged once on setup and again whenever state.a or state.b changes.
isReactive / isRef return booleans, toRaw hands back the unwrapped object, and markRaw returns an object that Vue will never proxy.

deps: { a: 1, b: 2 }        ← logged on setup, re-logged when state.a / state.b change
true                        ← isReactive(obj)
true                        ← isRef(refObj)
raw: plain object           ← toRaw(reactiveObj)
fast: original reference    ← markRaw(expensiveObj)

The heading Hand-written mini reactivity system renders with state.count = 0 beneath it.
Each click on the +1 button re-runs the tracked effect, so the number increases to 1, 2, 3… and the console logs Render: 1, Render: 2, and so on.

Hand-written mini reactivity system
state.count = 0
[ +1 (fires track/trigger) ]

console:
Render: 0        ← first activeEffect() call collects dependencies
Render: 1        ← click
Render: 2        ← click

const { ref, reactive, shallowRef, markRaw, isRef, isReactive, toRaw } = Vue

// ref: wraps any value
const count = ref(0)
console.log(isRef(count))   // true

// reactive: wraps an object
const state = reactive({ count: 0 })
console.log(isReactive(state))   // true

// shallowRef: shallow
const list = shallowRef([1, 2, 3])

// markRaw: permanently non-reactive
const map = markRaw(new Map())

// toRaw: strips the Proxy
const raw = toRaw(state)
console.log(raw === state)   // false

The console prints true, true, then false.
The last false proves that toRaw(state) returns the original object, which is not the same reference as the reactive proxy.

true          ← isRef(count)
true          ← isReactive(state)
false         ← raw === state