Suggest an edit

Improve this article

Refine the answer for “Why is Proxy faster than defineProperty?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**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.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts423 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.