0Pricing
Vue Academy · Lesson

ref vs reactive: When to Use Each

ref.value access, reactive unwrapping in templates, toRefs(), toRef() for destructuring.

Two Reactivity Tools

Vue offers two main ways to create reactive state: ref() and reactive(). They overlap, but each fits certain situations better. Knowing when to reach for which keeps your code clean.

ref Works with Any Value

ref() can wrap anything: a number, string, boolean, array, or object. The value lives on .value in JavaScript.

import { ref } from 'vue'

const count = ref(0)
const name = ref('Alice')
const isOpen = ref(false)

count.value++
name.value = 'Bob'

All lessons in this course

  1. Why Composition API?
  2. setup() Function and Reactive Variables
  3. ref vs reactive: When to Use Each
  4. Computed and Watch in Composition API
← Back to Vue Academy