What is and how does reactivity work with Ref and Reactive in Vue.js

In this Vue.js tutorial, we will see how reactivity works through the ref and reactive functions.

Reactivity is a programming paradigm that allows changes in data to automatically reflect in the user interface, creating a connection between the data and the UI.

That is, when you modify a reactive property, Vue will automatically detect that change and update any part of the interface that depends on that property.

Reactivity is one of the fundamental pillars of any modern framework. In Vue 3, it is mainly handled through two functions ref and reactive.

Both allow you to create reactive data, but they are used in different contexts. Let’s look at them in detail, and when to use each one.

Reactivity of primitive values with ref

The ref() function allows us to create reactive references to primitive values such as strings, numbers, or booleans (it can also contain objects, although we will see that reactive() is often more suitable for complex structures)

The basic syntax of ref is as follows:

import { ref } from 'vue';

const count = ref(0); // Create a reactive reference with initial value 0

When we create a variable with ref(), Vue wraps the value in an object with a single property .value.

To access or modify this value, we must use this property:

// Access the value
console.log(count.value) // 0

// Modify the value
count.value++
console.log(count.value) // 1

However, in Vue templates, you do not need to use .value, as Vue handles it automatically for us:

<template>
  <p>The counter is: {{ count }}</p>
  <button @click="count++">Increment</button>
</template>

<template>
  <div>
    <p>Counter: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

function increment() {
  count.value++;
}
</script>

Reactivity for objects and arrays with reactive

The reactive() function allows us to create complete reactive objects, where all their properties are automatically reactive. It is designed to handle objects and arrays.

The basic syntax of reactive is as follows:

import { reactive } from 'vue';

const state = reactive({
  counter: 0,
  message: 'Hello, LuisLlamas.es!'
});

With reactive, we can access and modify the properties of the object directly, without needing to use .value:

console.log(state.counter); // Access the value (0)
state.counter++; // Increment the value
console.log(state.counter); // Now it is 1

<template>
  <div>
    <input v-model="form.name" placeholder="Name" />
    <input v-model="form.age" placeholder="Age" type="number" />
    <p>Name: {{ form.name }}</p>
    <p>Age: {{ form.age }}</p>
  </div>
</template>

<script setup>
import { reactive } from 'vue';

const form = reactive({
  name: '',
  age: null
});
</script>

🆚 Comparison: ref() vs reactive()

To better illustrate the differences, let’s directly compare both APIs:

So, let’s summarize when to use one or the other.

const name = ref('Ana')
const counter = ref(0)
const active = ref(true)

const user = reactive({
  name: 'Ana',
  age: 28,
  address: {
    street: 'Main',
    city: 'Barcelona'
  },
  preferences: ['music', 'movies']
})

Deep reactivity

With deep reactivity or nested reactive, we refer to whether the internal properties will also be reactive (for example, obj.name, obj.details)

Let’s see it with examples,

<script setup>
import { ref } from 'vue'

const obj = ref({
  name: 'Vue',
  details: {
    version: 3
  }
})

function changeName() {
  obj.value.name = 'Vue.js' // ✅ Reactive
}

function changeVersion() {
  obj.value.details.version = 4 // ❌ NOT reactive (does not detect the change)
}
</script>

<template>
  <div>
    <p>{{ obj.name }}</p>
    <button @click="changeName">Change Name</button>
    <p>{{ obj.details.version }}</p>
    <button @click="changeVersion">Change Version</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const obj = reactive({
  name: 'Vue',
  details: {
    version: 3
  }
})

function changeName() {
  obj.name = 'Vue.js' // ✅ Reactive
}

function changeVersion() {
  obj.details.version = 4 // ✅ Also reactive (nested reactive!)
}
</script>

<template>
  <div>
    <p>{{ obj.name }}</p>
    <button @click="changeName">Change Name</button>
    <p>{{ obj.details.version }}</p>
    <button @click="changeVersion">Change Version</button>
  </div>
</template>

Converting between ref() and reactive()

It is not too common, but sometimes it may be necessary to convert between different types of reactivity. For that, Vue.js provides us with these mechanisms:

import { reactive, toRefs } from 'vue'

const state = reactive({
  name: 'Ana',
  age: 28
})

// Convert to individual refs
const { name, age } = toRefs(state)

// Now we can use name.value and maintain reactivity
name.value = 'Carlos' // Also updates state.name

import { reactive, toRef } from 'vue'

const state = reactive({ counter: 0 })
const counterRef = toRef(state, 'counter')

counterRef.value++ // Also increments state.counter

import { ref, reactive } from 'vue'

const name = ref('Ana')
const age = ref(28)

// Create a reactive object with refs
const user = reactive({
  name,
  age
})

name.value = 'Carlos' // Also updates user.name
user.age = 29        // Also updates age.value

The tracking process Advanced

In case at some point you are interested in delving a bit into understanding how reactivity works and the “magic” that Vue.js does, let’s briefly see how it works internally.

Vue 3 implements a reactivity system based on JavaScript Proxies, which was a significant improvement over the system based on Object.defineProperty() from Vue 2.

Basically,

That is, if we were to visualize the process (very simplified), it would look something like this.

// This is a conceptual simplification, not actual Vue code
function createReactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      // Register that someone is accessing this property
      track(target, key)
      return target[key]
    },
    set(target, key, value) {
      const oldValue = target[key]
      target[key] = value
      // Notify effects if the value changed
      if (oldValue !== value) {
        trigger(target, key)
      }
      return true
    }
  })
}

Vue.js performs these actions, along with tracking the dependencies of each object (tracking) and a view update mechanism (trigger), to make everything convenient for us to use.

On the other hand, the requirement for .value is due to JavaScript’s limitations regarding the reactivity of primitive values. Unlike objects, primitive values are passed by value and not by reference, meaning Vue could not directly track their changes.

For this reason, ref is a wrapper for a primitive value, which allows wrapping the variable in an object, enabling Vue.js’s reactivity system to do its job.