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

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

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

Conclusion