1---
2title: Avoid Comparing Reactive Objects with === Operator
3impact: HIGH
4impactDescription: Reactive proxies have different identity than original objects - comparison bugs are silent and hard to debug
5type: gotcha
6tags: [vue3, reactivity, proxy, comparison, debugging, identity]
7---
8 
9# Avoid Comparing Reactive Objects with === Operator
10 
11**Impact: HIGH** - Vue's `reactive()` returns a Proxy wrapper that has a different identity than the original object. Using `===` to compare reactive objects can lead to silent bugs where comparisons unexpectedly return `false`.
12 
13When you wrap an object with `reactive()`, the returned proxy is NOT equal to the original object. Additionally, accessing nested objects from a reactive object returns new proxy wrappers each time, which can cause identity comparison issues.
14 
15## Task Checklist
16 
17- [ ] Never compare reactive object instances with `===` directly
18- [ ] Use unique identifiers (ID, UUID) for object comparison instead
19- [ ] Use `toRaw()` on both sides when identity comparison is absolutely necessary
20- [ ] Consider using primitive identifiers from database records for comparison
21 
22**Incorrect:**
23```javascript
24import { reactive } from 'vue'
25 
26const original = { id: 1, name: 'Item' }
27const state = reactive(original)
28 
29// BUG: Always returns false - proxy !== original
30if (state === original) {
31  console.log('Same object') // Never executes
32}
33 
34// BUG: Nested object comparison fails
35const items = reactive([{ id: 1 }, { id: 2 }])
36const item = items[0]
37 
38// Later...
39if (items[0] === item) {
40  // May or may not work depending on Vue's proxy caching
41}
42 
43// BUG: Comparing items from different reactive sources
44const listA = reactive([{ id: 1 }])
45const listB = reactive([{ id: 1 }])
46if (listA[0] === listB[0]) {
47  // Never true, even though they represent the same data
48}
49```
50 
51**Correct:**
52```javascript
53import { reactive, toRaw } from 'vue'
54 
55const original = { id: 1, name: 'Item' }
56const state = reactive(original)
57 
58// CORRECT: Use toRaw() for identity comparison
59if (toRaw(state) === original) {
60  console.log('Same underlying object') // Works!
61}
62 
63// BEST: Use unique identifiers instead
64const items = reactive([
65  { id: 'uuid-1', name: 'Item 1' },
66  { id: 'uuid-2', name: 'Item 2' }
67])
68 
69function findItem(targetId) {
70  return items.find(item => item.id === targetId)
71}
72 
73function isSelected(item) {
74  return selectedId.value === item.id // Compare IDs, not objects
75}
76 
77// CORRECT: For Set/Map operations, use primitive keys
78const selectedIds = reactive(new Set())
79selectedIds.add(item.id)  // Use ID, not object
80selectedIds.has(item.id)  // Check by ID
81```
82 
83```javascript
84// When you must compare objects, use toRaw on both sides
85import { toRaw, isReactive } from 'vue'
86 
87function areEqual(a, b) {
88  const rawA = isReactive(a) ? toRaw(a) : a
89  const rawB = isReactive(b) ? toRaw(b) : b
90  return rawA === rawB
91}
92```
93 
94## Reference
95- [Vue.js Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)
96- [Vue.js toRaw() API](https://vuejs.org/api/reactivity-advanced.html#toraw)
97