Skip to main content

Why is Proxy faster than defineProperty?

VueJunior~2 min read
Suggest an edit

By itself, Proxy is not magically "faster" than defineProperty for a single operation. But in a real architecture (like Vue 3 vs Vue 2) it lets you do far less unnecessary work, so the whole reactivity system ends up faster and simpler.

Let's go through it step by step.

1. defineProperty: you have to walk the entire object up front

Vue 2:

  • To make an object reactive, you have to go through every property:

    js
    Object.defineProperty(obj, 'field', { get() { ... }, set(v) { ... } })

  • Nested objects and arrays also have to be recursively walked and "wrapped".

  • A large object ⇒ already a pile of work at startup (O(N) in the number of fields).

On top of that:

  • Adding a new field is not reactive until it is wrapped separately.
  • Deleting a property is not tracked either.
  • Arrays require workarounds (intercepting methods like push, splice, and so on).

Result: A lot of code, a lot of traversal, a lot of "magic".

2. Proxy: one object, one wrapper

Vue 3:

js
const reactiveObj = new Proxy(obj, { get(target, key, receiver) { ... }, set(target, key, value, receiver) { ... }, deleteProperty(target, key) { ... }, has(target, key) { ... }, ownKeys(target) { ... } })

What this gives you:

  • We wrap the whole object in one operation, not each property.
  • There's no need to walk all the keys up front.
  • Nested objects can be made reactive lazily, only when they are accessed.
  • Adding/removing properties automatically goes through set / deleteProperty.
  • Arrays work normally: indexes, length, methods, all of it is intercepted by proxy traps without hacks.

Result: Less "preparation" work, fewer special cases, everything more straightforward.

3. Why this is faster in practice

With defineProperty:

  • A large object ⇒ a long initial observation (observer) phase.
  • Any structural change (a new field, a deletion) ⇒ problems or extra workarounds.
  • Separate logic for arrays, prototypes, and nested structures.

With Proxy:

  • An O(1) wrapper per object.
  • No need to walk the full depth at initialization.
  • Far less supporting code and unnecessary operations.
  • JS engines (V8, SpiderMonkey, etc.) already optimize the proxy approach well when the code is written predictably.

So in a realistic application (like Vue 3):

  • a faster start (less work when creating reactive objects),
  • less overhead when working with large structures,
  • fewer workarounds for arrays, delete, in, for...in, Object.keys, and so on.

Short Answer

Interview ready
Premium

A concise answer to help you respond confidently on this topic during an interview.

Suggest an edit