1---
2title: Return Stable Object References from Computed Properties
3impact: MEDIUM
4impactDescription: Computed properties returning new objects trigger effects even when values haven't meaningfully changed
5type: efficiency
6tags: [vue3, computed, performance, reactivity, vue3.4]
7---
8 
9# Return Stable Object References from Computed Properties
10 
11**Impact: MEDIUM** - In Vue 3.4+, computed properties only trigger effects when their value changes. However, if a computed returns a new object each time, Vue cannot detect that the values inside are the same. This causes unnecessary effect re-runs.
12 
13For primitive values, Vue 3.4+ handles this automatically. For objects, manually compare and return the previous value when nothing meaningful has changed.
14 
15## Task Checklist
16 
17- [ ] For computed properties returning primitives, Vue 3.4+ handles stability automatically
18- [ ] For computed properties returning objects, compare with previous value and return old reference if unchanged
19- [ ] Always perform the full computation before comparing (to track dependencies correctly)
20- [ ] Consider if you really need to return an object, or if primitives would suffice
21 
22**Incorrect:**
23```vue
24<script setup>
25import { ref, computed, watchEffect } from 'vue'
26 
27const count = ref(0)
28 
29// BAD: Returns new object every time, always triggers effects
30const stats = computed(() => {
31  return {
32    isEven: count.value % 2 === 0,
33    doubleValue: count.value * 2
34  }
35})
36 
37watchEffect(() => {
38  console.log('Stats changed:', stats.value)
39  // Logs on EVERY count change, even when isEven hasn't changed
40  // count: 0 -> 2 -> 4: isEven is always true, but effect runs each time
41})
42</script>
43```
44 
45**Correct:**
46```vue
47<script setup>
48import { ref, computed, watchEffect } from 'vue'
49 
50const count = ref(0)
51 
52// GOOD (Vue 3.4+): Primitive computed - automatic stability
53const isEven = computed(() => count.value % 2 === 0)
54 
55watchEffect(() => {
56  console.log('isEven:', isEven.value)
57  // Only logs when isEven actually changes (0, 2, 4 won't re-trigger)
58})
59 
60// GOOD (Vue 3.4+): Manual comparison for object returns
61const stats = computed((oldValue) => {
62  // Step 1: Always compute the new value first (to track dependencies)
63  const newValue = {
64    isEven: count.value % 2 === 0,
65    category: count.value < 10 ? 'small' : 'large'
66  }
67 
68  // Step 2: Compare with previous value
69  if (oldValue &&
70      oldValue.isEven === newValue.isEven &&
71      oldValue.category === newValue.category) {
72    return oldValue  // Return old reference - no effect triggers
73  }
74 
75  return newValue
76})
77 
78watchEffect(() => {
79  console.log('Stats changed:', stats.value)
80  // Now only logs when isEven or category actually changes
81})
82</script>
83```
84 
85## Primitive vs Object Computed Behavior (Vue 3.4+)
86 
87```javascript
88import { ref, computed, watchEffect } from 'vue'
89 
90const count = ref(0)
91 
92// PRIMITIVE: Vue automatically detects value hasn't changed
93const isEven = computed(() => count.value % 2 === 0)
94 
95watchEffect(() => console.log(isEven.value))  // true
96 
97count.value = 2  // isEven still true - NO log
98count.value = 4  // isEven still true - NO log
99count.value = 3  // isEven now false - logs: false
100 
101// OBJECT: New reference every time (without manual comparison)
102const obj = computed(() => ({ isEven: count.value % 2 === 0 }))
103 
104watchEffect(() => console.log(obj.value))  // { isEven: true }
105 
106count.value = 2  // Logs again! New object reference
107count.value = 4  // Logs again! New object reference
108```
109 
110## Advanced: Deep Object Comparison
111 
112```javascript
113import { ref, computed } from 'vue'
114import { isEqual } from 'lodash-es'  // For deep comparison
115 
116const filters = ref({ category: 'all', sortBy: 'date', page: 1 })
117 
118// For complex objects, use deep comparison
119const activeFilters = computed((oldValue) => {
120  const newValue = {
121    ...filters.value,
122    hasFilters: filters.value.category !== 'all' || filters.value.sortBy !== 'date'
123  }
124 
125  // Deep compare for complex objects
126  if (oldValue && isEqual(oldValue, newValue)) {
127    return oldValue
128  }
129 
130  return newValue
131})
132```
133 
134## Important: Always Compute Before Comparing
135 
136```javascript
137// BAD: Early return prevents dependency tracking
138const optimized = computed((oldValue) => {
139  if (oldValue && someCondition) {
140    return oldValue  // Dependencies not tracked!
141  }
142  return computeExpensiveValue()
143})
144 
145// GOOD: Compute first, then compare
146const optimized = computed((oldValue) => {
147  const newValue = computeExpensiveValue()  // Always track dependencies
148  if (oldValue && newValue === oldValue) {
149    return oldValue
150  }
151  return newValue
152})
153```
154 
155## Reference
156- [Vue.js Performance - Computed Stability](https://vuejs.org/guide/best-practices/performance.html#computed-stability)
157- [Vue.js Computed Properties](https://vuejs.org/guide/essentials/computed.html)
158