Comparison of Vue 2 and Vue 3 Reactivity: Object.defineProperty vs Proxy

Overview

Vue 2 and Vue 3 share the same goal of automatic view updates when data changes, but they implement reactivity with different mechanisms. Vue 2 uses Object.defineProperty , while Vue 3 uses Proxy . Below is a brief introduction to both.

Object.defineProperty and Proxy

Object.defineProperty and Proxy are two ways in JavaScript to control property access and modification. They have similar purposes but differ greatly in usage and capabilities.

1. Object.defineProperty

Object.defineProperty is an API that defines a property on an object, allowing precise control over its behavior.

Features:

Can define data and accessor properties.

Can control attributes such as writable, enumerable, configurable.

Useful when you need getter/setter or fine‑grained control over a property.

Example:

let obj = {};
Object.defineProperty(obj, 'name', {
  value: 'Alice',
  writable: true,
  enumerable: true,
  configurable: true
});
console.log(obj.name); // "Alice"

Object.defineProperty(obj, 'age', {
  get() {
    return this._age;
  },
  set(value) {
    this._age = value;
  }
});
obj.age = 25;
console.log(obj.age); // 25

Explanation:

value : initial value of the property.

writable : whether the value can be changed.

enumerable : whether the property appears in for...in loops.

configurable : whether the property can be deleted or its descriptor changed.

get and set : control reading and writing.

2. Proxy

Proxy is an ES6 feature that creates a proxy object to intercept operations on the original object, such as get, set, delete, function call, etc.

Features:

Allows definition of many different traps (get, set, has, deleteProperty, apply, etc.).

Can intercept virtually all operations, offering great flexibility.

Example:

let person = { name: 'Alice', age: 25 };
let proxy = new Proxy(person, {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    } else {
      return `Property ${prop} does not exist`;
    }
  },
  set(target, prop, value) {
    if (prop === 'age' && value < 0) {
      throw new Error('Age cannot be negative');
    } else {
      target[prop] = value;
      return true;
    }
  }
});
console.log(proxy.name); // "Alice"
console.log(proxy.age); // 25
console.log(proxy.gender); // "Property gender does not exist"
try {
  proxy.age = -5;
} catch (e) {
  console.log(e.message); // "Age cannot be negative"
}
proxy.age = 30;
console.log(proxy.age); // 30

Explanation:

get : intercepts property reads.

set : intercepts property writes.

target : the original object.

prop : property name.

value : new value.

Returning true from set indicates success.

3. Object.defineProperty vs Proxy

Feature

Object.defineProperty

Proxy

Intercepted operations

Only single property get/set

All operations (read, write, delete, call, etc.)

Performance

More efficient for single property control

More flexible but potentially slower for complex traps

Use cases

Fine‑grained control of individual properties

Global interception of object behavior

Ease of use

Requires detailed descriptor configuration

More concise, can intercept many operations

Supported features

Getter, setter, descriptor

get, set, has, deleteProperty, apply, etc.

Scope

Only existing object properties

Can intercept addition, deletion, modification of any property

When to use:

If you need precise control over a single property (e.g., custom getter/setter), Object.defineProperty is appropriate.

If you need to intercept the whole object's behavior, Proxy offers greater flexibility and power.

Vue 2 Reactivity Mechanism

Vue 2 uses Object.defineProperty to proxy reactive data.

1. Data hijacking (data proxy)

Vue adds a getter and setter for each property via Object.defineProperty() . The getter collects dependencies; the setter notifies watchers to update the view.

2. Dependency collection

Each getter adds the current watcher to the property's dependency list. When the setter runs, all dependent watchers are notified.

3. Core implementation

// Simplified Vue 2 reactivity
let obj = { name: 'Alice' };
Object.defineProperty(obj, 'name', {
  get() {
    console.log('Getting name');
    return this._name;
  },
  set(newValue) {
    console.log('Setting name');
    this._name = newValue;
    // trigger view update
    updateView();
  }
});

Limitations:

Performance issues when many properties need to be defined.

Cannot react to addition or deletion of properties.

Vue 3 Reactivity Mechanism

Vue 3 introduces a new reactivity system based on Proxy , which can intercept all operations on an object.

1. Proxy-based proxy

Vue creates a proxy with a handler that intercepts get, set, etc., without defining getters/setters for each property.

2. Dependency tracking and update

When a property is accessed, the proxy's get trap collects dependencies; when the property changes, the set trap triggers view updates.

3. Core implementation

// Simplified Vue 3 reactivity
const handler = {
  get(target, prop) {
    console.log(`Accessing property: ${prop}`);
    track(target, prop); // collect dependency
    return target[prop];
  },
  set(target, prop, value) {
    console.log(`Modifying property: ${prop} to ${value}`);
    target[prop] = value;
    trigger(target, prop); // notify view
    return true;
  }
};
const obj = new Proxy({}, handler);
obj.name = 'Alice';
console.log(obj.name);

Advantages of Vue 3:

Performance boost: Proxy can handle the whole object at once.

Supports addition and deletion of properties automatically.

Simpler and more flexible code compared to the verbose Object.defineProperty approach.

Summary: Vue 2 vs Vue 3 Reactivity Comparison

Feature

Vue 2 (Object.defineProperty)

Vue 3 (Proxy)

Implementation

Uses

Object.defineProperty

for each property

Uses

Proxy

to proxy the whole object

Performance

Slower with many properties

Higher performance via whole‑object proxy

Add/Delete property

Manual handling, not reactive

Automatic reactive handling

Dependency collection

Based on getter

Based on proxy

get

trap

Supported operations

Only get and set

get, set, delete, has, apply, etc.

Use cases

Simple objects/arrays

Complex, dynamic data structures

Overall, Vue 3’s reactivity system outperforms Vue 2 in both speed and flexibility thanks to the power of Proxy .