Vue 3 Reactivity (Proxy-based) vs Vue 2 (Object.defineProperty)

In Vue, reactivity is the magic that synchronizes state changes with the DOM. However, the underlying implementation underwent a complete architectural rewrite between Vue 2 and Vue 3.

1. What the Interviewer Is Testing

Interviewers use this question to check if you understand:

• Fundamental Javascript Mechanics: Can you explain ES6 Proxy and Reflect vs Object.defineProperty?
• Framework Limitations: Why did Vue 2 require helper APIs like this.$set and this.$delete?
• Performance Bottlenecks: How does property traversal impact initialization memory and runtime performance in large applications?
• Dependency Injection: How does the dependency tracking loop (Dep and Watcher or Effect) schedule re-renders?

2. Vue 2: Reactivity with Object.defineProperty

In Vue 2, the reactivity system iterates recursively through every property of an object during initialization and converts them into getters and setters using Object.defineProperty.

How Dependency Tracking Works in Vue 2

// Simplified Vue 2 Reactive Loop
function defineReactive(obj, key, val) {
  const dep = new Dep(); // Holds watchers subscribed to this property
  
  // Recursively observe nested objects
  observe(val);
 
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get() {
      // 1. Dependency Collection: Track active watcher
      if (Dep.target) {
        dep.addSub(Dep.target);
      }
      return val;
    },
    set(newVal) {
      if (newVal === val) return;
      val = newVal;
      // Recursively observe new values
      observe(newVal);
      // 2. Dependency Notification: Notify watchers to re-render
      dep.notify();
    }
  });
}

Limitations of Object.defineProperty

Because Vue 2 defines getters and setters on existing keys during instantiation, it cannot detect:

1. Adding New Properties: Adding this.obj.newKey = 'value' after instantiation does not trigger a re-render because no getter/setter exists on newKey.
2. Deleting Properties: Deleting delete this.obj.key goes undetected.
3. Array Index Changes: Modifying array indices directly this.arr[0] = 'newVal' or changing array length this.arr.length = 0 does not trigger updates because array index access cannot be observed using defineProperty.

Workarounds in Vue 2

Developers had to rely on custom framework wrappers:

// Adding dynamic properties
this.$set(this.userProfile, 'age', 30);
 
// Array element updates
this.$set(this.items, index, newItem);

3. Vue 3: Reactivity with ES6 Proxy

Vue 3 addresses these limits by using ES6 Proxy to wrap objects. A Proxy creates a target wrapper that intercepts fundamental operations (like getting, setting, deleting, and checking if a key exists) rather than individual keys.

How Vue 3 Proxy Interception Works

Instead of mutating the object's properties directly, Vue 3 creates handlers using a global reactivity map (ReactiveEffect and Track/Trigger functions).

// Simplified Vue 3 Proxy handlers
const handlers = {
  get(target, key, receiver) {
    // 1. Track dependency
    track(target, key);
    
    const res = Reflect.get(target, key, receiver);
    
    // Lazy observation: Observe nested structures only when accessed
    if (typeof res === 'object' && res !== null) {
      return reactive(res);
    }
    return res;
  },
  set(target, key, value, receiver) {
    const oldValue = target[key];
    const result = Reflect.set(target, key, value, receiver);
    
    if (oldValue !== value) {
      // 2. Trigger updates
      trigger(target, key);
    }
    return result;
  },
  deleteProperty(target, key) {
    const hasKey = Object.prototype.hasOwnProperty.call(target, key);
    const result = Reflect.deleteProperty(target, key);
    if (hasKey && result) {
      trigger(target, key);
    }
    return result;
  }
};
 
function reactive(target) {
  return new Proxy(target, handlers);
}

Advantages of ES6 Proxies in Vue 3

1. Dynamic Detection: Property additions (obj.newKey = 'val') and property deletions (delete obj.key) are intercepted at the Proxy level automatically.
2. Direct Array Modification: Updating indices directly (arr[2] = 'val') or modifying array lengths automatically triggers reactions.
3. Lazy observation: In Vue 2, nested objects are traversed eagerly at start. In Vue 3, child objects are only wrapped in reactive() when they are accessed, saving substantial memory and initial load time.
4. Support for modern structures: Proxy can observe Map, Set, WeakMap, and WeakSet.

4. Key Structural Comparison

5. Typical Follow-up Questions

"How does Vue 3 react to non-reactive values?"

Vue 3 reactivity is bound to proxy objects. If you bypass the proxy and edit the original target object directly (e.g. toRaw(reactiveObj)), Vue will not track the update and the UI will not re-render.

"Why does Vue 3 still need ref if Proxies are so powerful?"

JavaScript's ES6 Proxy only works on non-primitive values (objects, arrays, collections). Primitive values (like numbers, strings, or booleans) cannot be wrapped by Proxy. Vue uses ref to wrap primitives inside a container object with a single reactive property .value.