Ref and reactive in Composition API in Vue - Deep Dive

Overview - Ref and reactive in Composition API

What is it?

Ref and reactive are two ways to create reactive state in Vue's Composition API. Ref wraps a single value and makes it reactive, while reactive creates a reactive proxy for an entire object or array. They let Vue track changes and update the user interface automatically. This helps build dynamic, interactive web apps easily.

Why it matters

Without ref and reactive, developers would have to manually update the UI when data changes, which is error-prone and slow. These tools solve the problem of keeping the UI in sync with data automatically. This makes apps smoother, easier to maintain, and less buggy, improving user experience and developer productivity.

Where it fits

Before learning ref and reactive, you should understand basic JavaScript objects and Vue's template syntax. After mastering them, you can learn advanced state management, Vue's watch and computed APIs, and how to build complex reactive systems.

Mental Model

Core Idea

Ref and reactive wrap data so Vue can watch for changes and update the UI automatically.

Think of it like...

Imagine ref as a single mailbox holding one letter, and reactive as a whole mailbox system holding many letters and packages. Vue checks these mailboxes for new mail to deliver updates.

┌─────────────┐       ┌───────────────┐
│   ref(val)  │──────▶│  reactive UI  │
│  (single)   │       │  updates when │
└─────────────┘       │  val changes  │
                      └───────────────┘

┌─────────────────────┐
│ reactive(object)    │──────▶ reactive UI updates
│ (many properties)   │
└─────────────────────┘

Build-Up - 7 Steps

1

Foundation

Understanding Vue Reactivity Basics

Concept: Vue tracks changes in data to update the UI automatically.

In Vue, when data changes, the UI updates to reflect those changes without manual DOM manipulation. This is called reactivity. Vue uses special wrappers to watch data and trigger updates.

Result

UI elements change automatically when the underlying data changes.

Understanding that Vue automatically updates the UI when data changes is the foundation for why ref and reactive exist.

2

Foundation

What is ref in Composition API

Concept: Ref creates a reactive wrapper around a single value.

Using ref, you wrap a single value like a number or string. Vue tracks this value and updates the UI when it changes. You access the value inside ref with .value. Example: const count = ref(0); count.value = 1; // UI updates automatically

Result

A reactive single value that triggers UI updates when changed.

Knowing that ref wraps a single value and requires .value to access helps avoid confusion and bugs.

3

Intermediate

What is reactive in Composition API

Concept: Reactive creates a reactive proxy for an entire object or array.

Reactive wraps an object or array so Vue can track changes to any property inside it. Example: const state = reactive({ count: 0, name: 'Vue' }); state.count = 2; // UI updates automatically You do not use .value here.

Result

A reactive object or array that updates the UI when any property changes.

Understanding reactive lets you manage complex state with many properties easily.

4

Intermediate

Differences Between ref and reactive

🤔Before reading on: Do you think ref can wrap objects as easily as reactive? Commit to your answer.

Concept: Ref is for single values; reactive is for objects and arrays.

Ref wraps any value but is best for primitives or single values. Reactive is designed for objects and arrays and tracks nested properties deeply. Ref example: const message = ref('hello'); Reactive example: const user = reactive({ name: 'Alice', age: 30 });

Result

Choosing the right tool based on data type improves code clarity and performance.

Knowing when to use ref vs reactive prevents bugs and makes your code easier to understand.

5

Intermediate

Accessing and Updating Reactive Data

🤔Before reading on: Do you think you access reactive object properties with .value like ref? Commit to your answer.

Concept: Ref requires .value to access; reactive does not.

For ref: const count = ref(0); console.log(count.value); // access count.value = 5; // update For reactive: const state = reactive({ count: 0 }); console.log(state.count); // access state.count = 5; // update

Result

Correct access patterns avoid runtime errors and confusion.

Understanding access differences is key to using Composition API state correctly.

6

Advanced

Reactivity Caveats and Limitations

🤔Before reading on: Do you think reactive tracks new properties added after creation automatically? Commit to your answer.

Concept: Reactive does not track new properties added later; ref always tracks its value.

Reactive creates a proxy for existing properties only. Adding new properties later won't be reactive unless you use Vue.set or create the property upfront. Example: const state = reactive({}); state.newProp = 123; // Not reactive Ref always tracks its value changes: const count = ref(0); count.value = 1; // reactive

Result

Knowing this prevents bugs where UI does not update as expected.

Understanding reactive's limitation with new properties helps avoid silent bugs.

7

Expert

Ref Unwrapping and Proxy Internals

🤔Before reading on: Do you think Vue unwraps ref automatically inside reactive objects? Commit to your answer.

Concept: Vue unwraps refs inside reactive objects but not in all cases, affecting reactivity behavior.

When you put a ref inside a reactive object, Vue unwraps it so you can access the value directly. Example: const count = ref(0); const state = reactive({ count }); console.log(state.count); // 0, not ref object However, this unwrapping can cause confusion if you expect the ref wrapper. Vue uses proxies to track changes and trigger updates efficiently.

Result

Knowing unwrapping behavior helps write predictable reactive code and debug issues.

Understanding how Vue unwraps refs inside reactive objects clarifies subtle bugs and improves advanced state management.

Under the Hood

Vue uses JavaScript proxies to wrap objects and intercept get and set operations. For ref, Vue creates an object with a .value property and tracks reads and writes to it. For reactive, Vue creates a proxy that intercepts property access and mutations deeply, tracking dependencies. When data changes, Vue triggers updates to components that use that data.

Why designed this way?

Vue's reactivity system was designed to be efficient and intuitive. Using proxies allows Vue to track dependencies without manual subscriptions. Ref was introduced to handle primitive values reactively, which proxies alone can't track. This design balances performance, ease of use, and flexibility.

┌───────────────┐      ┌───────────────┐      ┌───────────────┐
│  User Code    │─────▶│ Vue Proxy or  │─────▶│ Dependency    │
│ (ref/reactive)│      │ Ref Wrapper   │      │ Tracking      │
└───────────────┘      └───────────────┘      └───────────────┘
         ▲                      │                      │
         │                      ▼                      ▼
  ┌───────────────┐      ┌───────────────┐      ┌───────────────┐
  │  Component    │◀─────│  Reactivity   │◀─────│  Data Changes │
  │  Render       │      │  System       │      │  (set, update)│
  └───────────────┘      └───────────────┘      └───────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Do you think reactive tracks new properties added after creation automatically? Commit to yes or no.

Common Belief: Reactive objects track all property changes, including new properties added later.

Reality: Reactive only tracks properties present when the object is made reactive. New properties added later are not reactive unless handled specially.

Why it matters: Adding new properties without care leads to UI not updating, causing confusing bugs.

Quick: Do you think ref always requires .value to access inside templates? Commit to yes or no.

Common Belief: You must always use .value to access ref values, even inside templates.

Reality: In Vue templates, ref values are unwrapped automatically, so you can use them directly without .value.

Why it matters: Misunderstanding this leads to verbose or incorrect template code.

Quick: Do you think reactive can wrap primitive values like numbers or strings? Commit to yes or no.

Common Belief: Reactive can wrap any value, including primitives like numbers or strings.

Reality: Reactive only works with objects and arrays. For primitives, ref must be used.

Why it matters: Using reactive on primitives causes errors or no reactivity, leading to wasted time debugging.

Quick: Do you think ref inside reactive objects behaves exactly like standalone refs? Commit to yes or no.

Common Belief: Ref inside reactive objects behaves exactly like standalone refs, requiring .value access.

Reality: Vue unwraps refs inside reactive objects, so you access the value directly without .value.

Why it matters: Not knowing this causes confusion and bugs when mixing ref and reactive.

Expert Zone

1

Vue unwraps refs inside reactive objects but not inside arrays, which can cause subtle bugs.

2

Using reactive on large nested objects can impact performance due to deep proxying; selective ref usage can optimize this.

3

Ref can hold objects too, but wrapping objects in ref disables deep reactivity, unlike reactive.

When NOT to use

Do not use reactive for primitive values; use ref instead. Avoid reactive for very large or deeply nested objects if performance is critical; consider using shallowReactive or ref with manual updates. For simple state, sometimes Vue's Options API or external state management libraries may be better.

Production Patterns

In production, developers often use ref for simple counters or flags and reactive for complex state objects. They combine ref and reactive to optimize performance and clarity. They also use watch and computed with ref/reactive to create derived state and side effects.

Connections

Observer Pattern

Ref and reactive implement a form of the observer pattern by tracking dependencies and notifying changes.

Understanding observer pattern principles clarifies how Vue tracks and reacts to data changes.

Functional Programming

Ref and reactive encourage immutable-like patterns by separating state and effects.

Knowing functional programming concepts helps write cleaner reactive code with fewer side effects.

Spreadsheet Cell Dependencies

Like spreadsheet cells updating when dependent cells change, ref and reactive update UI when data changes.

Recognizing this connection helps understand automatic dependency tracking and update propagation.

Common Pitfalls

#1 Adding new properties to reactive objects expecting reactivity.

Wrong approach:

const state = reactive({});
state.newProp = 'hello'; // UI will NOT update

Correct approach:

const state = reactive({ newProp: 'hello' }); // define upfront
// or use Vue.set(state, 'newProp', 'hello') in Vue 2

Root cause:

Reactive proxies only track existing properties; new properties added later are not reactive.

#2 Accessing ref value without .value in JavaScript code.

Wrong approach:

const count = ref(0);
console.log(count); // logs ref object, not value

Correct approach:

const count = ref(0);
console.log(count.value); // logs 0

Root cause:

Ref wraps value inside .value property; forgetting this causes confusion.

#3 Using reactive on a primitive value.

Wrong approach:

const num = reactive(5); // does not work as expected

Correct approach:

const num = ref(5); // correct reactive primitive

Root cause:

Reactive only works with objects and arrays; primitives need ref.

Key Takeaways

Ref and reactive are core tools in Vue's Composition API to create reactive state that updates the UI automatically.

Use ref for single primitive values and reactive for objects or arrays with multiple properties.

Ref requires accessing the value with .value in JavaScript, but Vue templates unwrap refs automatically.

Reactive proxies only track existing properties; adding new properties later is not reactive unless handled carefully.

Understanding Vue's unwrapping of refs inside reactive objects helps avoid subtle bugs in complex state management.