✅ A table summarizing the differences

Data types	Vue2 reactive processing	Vue3 reactive processing	Fundamental differences
Object	Object.defineProperty hijacks properties	Proxy intercepts all operations	Vue3 is more complete, faster, and supports deep operations
Array	Only rewrites 7 change methods, cannot monitor index and length	Proxy can monitor all operations	Vue2 has a serious lack of monitoring capabilities, Vue3 is complete
Map	❌ Not supported	✔ Full support: get/set/has/delete/clear/traversal	Vue2 cannot handle it, Vue3 can respond to complex data structures
Set	❌ Not supported	✔ Full support: add/delete/clear/traversal	Vue2 cannot handle it, Vue3 supports iterative dependency tracking
WeakMap / WeakSet	❌ Not supported	✔ Supported (but weak collections do not trigger dependencies)	Used for internal caching
Dependency Tracking	Can only track property getters	Can track any behavior: iteration, size, keys, values	Vue3’s capabilities far exceed Vue2
Performance	A lot of overhead, the larger the object, the slower	Proxy constant time	Vue3 has obvious advantages in big data structures

1. Vue2’s reactive system cannot perfectly proxy arrays

Vue2 can only do two things:

1. Do defineProperty on array elements → Only detect existing indexes
2. Override the array mutating function:

push
pop
shift
unshift
splice
sort
reverse

❌ Vue2 cannot monitor the situation

The following Vue2 all cannot be monitored:

arr[3] = 123   // 无法监听新增索引
arr.length = 1 // 无法监听 length 变化

👉 Because defineProperty cannot intercept index changes and cannot hijack length.

✔ Vue3’s array scheme is completely different: use Proxy

Vue3 uses:

Proxy(target, {
  get,
  set,
  has,
  ownKeys,
  deleteProperty,
})

So all behaviors of arrays can be intercepted:

Vue3 can monitor all situations:

arr[3] = 123        // ✔ 能监听
arr.length = 1      // ✔ 能监听
for (let i of arr)  // ✔ 遍历依赖建立
Object.keys(arr)    // ✔ ownKeys 拦截

👉 This makes Vue3’s array responsiveness almost the same as native JS.

2. Vue2 cannot handle Map / Set at all

Vue2's reactivity is based on defineProperty:

• Map does not have key as attribute
• Set has no index
• There is no way to listen for add/delete/clear
• Unable to capture iteration operations (forEach, for...of)

❌ Why can’t Vue2 do it?

Because there is no way to intercept the behavior of Map/Set at the attribute level.

3. ✔ Vue3 fully supports Map/Set (super powerful)

Vue3 uses Proxy, so it can listen to all methods of Map/Set.

Vue3 listens for all the following actions:

Map/Set API	Does Vue3 support responsiveness
get	✔ Create dependencies
set / add	✔ trigger update
delete	✔
clear	✔
forEach	✔
entries/keys/values	✔
size	✔ will trigger an update

Example: Vue3’s Map is responsive

const m = reactive(new Map())

m.set("name", "vue")  // 触发更新
m.get("name")         // 建立依赖
m.delete("name")      // 触发更新

Even:

for (const [k,v] of m) {
  // 也会建立迭代依赖
}

4. Vue3 has the concept of "iteration dependency", which Vue2 cannot do

Vue3 also establishes dependencies on such operations:

for...of
for...in
Object.keys()
Object.values()
Object.entries()
map.forEach()
map.size

This doesn't exist at all in Vue2.

5. weak collections (new support in Vue3)

Vue3 also supports:

WeakMap
WeakSet

But be careful:

• Because key is a weak reference, so Dependencies are not persisted
• Internally often used for caching, such as the dependency table of track/trigger

🎯 Core summary (enough for interviews)

The essence of the responsive difference between Vue2 vs Vue3:

Features	Vue2(defineProperty)	Vue3(Proxy)
Hijackable scope	Attribute level only	All operations on the entire object
Array	can only hijack 7 methods	all operations
New attribute	Unable to monitor	Automatically monitor
Delete attribute	Unable to monitor	Automatically monitor
Map / Set	❌ Unable to monitor	✔ Full support
Iterative dependencies	❌ Not supported	✔ Supported
Deep structure	Poor performance	Fast
A large number of objects	Extremely slow initialization	Good performance

📌 Summarize in one sentence

Vue3's reactive system is fundamentally rewritten; arrays, Maps, and Sets are all fully reactive, while Vue2 can only barely support objects and partial array APIs.