Why Vue 3 Switched to Proxy: Overcoming Vue 2’s Reactivity Limits

Vue 2’s reactive system is built on Object.defineProperty for data hijacking, while Vue 3 rewrites the system using Proxy, a decision driven by several technical limitations.

Limitations of Object.defineProperty

1. Limited array support

In Vue 2, Object.defineProperty cannot directly observe array changes, so Vue 2 overrides the following array methods to achieve reactivity:

push()

pop()

shift()

unshift()

splice()

sort()

reverse()

This means some array operations are not automatically detected:

Direct index assignment: arr[index] = newValue Modifying array length:

arr.length = newLength

2. Dynamic property constraints

When using Object.defineProperty, all object properties must be known in advance to make them reactive, leading to:

Inability to detect addition or deletion of object properties

Requirement to use special Vue.set() and Vue.delete() methods

Reduced development experience and code intuitiveness

3. Performance overhead

Vue 2’s reactive system requires:

Deep traversal of all object properties

Creation of getter and setter for each property

Recursive handling of nested objects

This results in noticeable initialization performance costs, especially for large objects.

Advantages of Proxy

1. Full array support

Proxy can fully monitor all array operations, including:

Index access and modification

Length changes

All array methods

No special handling needed for complete reactivity

2. Dynamic property tracking

Proxy provides stronger capabilities:

Can observe addition and deletion of object properties

No need to predefine all properties

Eliminates the need for Vue.set() and Vue.delete() Offers a more natural object manipulation experience

3. Better performance

Proxy’s benefits include:

Lazy handling: proxies are applied only when a property is accessed

No recursive traversal of all object properties

Reduced initialization performance overhead

More efficient property access mechanisms

Actual code comparison

Implementation in Vue 2

Implementation in Vue 3

Feel free to add more.