Home Arrow Icon Knowledge base Arrow Icon Global Arrow Icon How does the performance of ref() compare to reactive() in large-scale projects


How does the performance of ref() compare to reactive() in large-scale projects


To compare the performance of `ref()` and `reactive()` in large-scale projects, let's consider a simple example of a counter that increments and decrements. We will use both `ref()` and `reactive()` to manage the state and measure the performance.

Using `ref()` 

javascript
import { ref } from 'vue'

const counter = ref(0)

function increment() {
  counter.value++
}

function decrement() {
  counter.value--
}

export default {
  setup() {
    return {
      counter,
      increment,
      decrement
    }
  }
}

Using `reactive()` 

javascript
import { reactive } from 'vue'

const counter = reactive({ value: 0 })

function increment() {
  counter.value++
}

function decrement() {
  counter.value--
}

export default {
  setup() {
    return {
      counter,
      increment,
      decrement
    }
  }
}

Performance Comparison

To compare the performance, we can use the `performance` API to measure the time it takes to increment and decrement the counter 1000 times using both `ref()` and `reactive()`. 

javascript
import { ref } from 'vue'
import { reactive } from 'vue'
import { performance } from 'perf_hooks'

const counterRef = ref(0)
const counterReactive = reactive({ value: 0 })

function incrementCounterRef() {
  for (let i = 0; i < 1000; i++) {
    counterRef.value++
  }
}

function decrementCounterRef() {
  for (let i = 0; i < 1000; i++) {
    counterRef.value--
  }
}

function incrementCounterReactive() {
  for (let i = 0; i < 1000; i++) {
    counterReactive.value++
  }
}

function decrementCounterReactive() {
  for (let i = 0; i < 1000; i++) {
    counterReactive.value--
  }
}

const startRef = performance.now()
incrementCounterRef()
decrementCounterRef()
const endRef = performance.now()

const startReactive = performance.now()
incrementCounterReactive()
decrementCounterReactive()
const endReactive = performance.now()

console.log(`Ref performance: ${endRef - startRef} ms`)
console.log(`Reactive performance: ${endReactive - startReactive} ms`)

Results

The results will vary depending on the specific environment and system. However, in general, `ref()` tends to perform slightly better than `reactive()` due to its ability to handle primitives directly without the need for proxying.

Conclusion

In summary, while both `ref()` and `reactive()` can be used for managing state in Vue 3, `ref()` is generally more efficient and suitable for handling primitives. However, `reactive()` provides a more intuitive API for managing complex objects and can be useful in certain situations. The choice between the two ultimately depends on the specific requirements and constraints of your project.
Citations:
[1] https://stackoverflow.com/questions/61452458/ref-vs-reactive-in-vue-3
[2] https://michaelnthiessen.com/ref-vs-reactive
[3] https://www.reddit.com/r/vuejs/comments/1192u4q/ref_vs_reactive_which_is_best/
[4] https://blog.logrocket.com/reactivity-vue-3-composition-api-ref-reactive/
[5] https://www.telerik.com/blogs/should-use-ref-reactive-vue-3