Why Shallow ref and shallow reactive in Vue? - Purpose & Use Cases

The Big Idea

Discover how to speed up your Vue app by watching only what really matters!

The Scenario

Imagine you have a big object with many nested properties, and you want to track changes only on the top level, not deep inside. Manually checking every nested property for changes is like trying to watch every leaf on a huge tree for movement.

The Problem

Manually tracking deep changes is slow and complicated. It can cause your app to react too often, making it laggy. Also, it's easy to miss updates or cause bugs because you forgot to watch some nested parts.

The Solution

Shallow ref and shallow reactive let you watch only the top layer of your data. This means Vue tracks changes on the main object but ignores deep nested parts, making your app faster and simpler to manage.

Before vs After

✗ Before

const data = reactive({ user: { name: 'Alice', age: 30 } }); // tracks all nested changes

✓ After

const data = shallowReactive({ user: { name: 'Alice', age: 30 } }); // tracks only top-level changes

What It Enables

This lets you build faster, more efficient apps by controlling exactly what changes Vue should react to.

Real Life Example

Think of a social media app where you only want to update the user profile header when the main user object changes, but not every tiny detail inside their settings.

Key Takeaways

Manual deep tracking is slow and error-prone.

Shallow ref/reactive track only top-level changes.

This improves app speed and simplifies state management.