Should I use ref or reactive?

The Vue community generally recommends defaulting to `ref()` for everything. It provides a visual cue (`.value`) that a variable is reactive, and it handles primitive types perfectly.

HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///

⚡ Total XP: 0|💻 react XP: 0

Reactivity: ref vs reactive in Vue.js

Learn about Reactivity: ref vs reactive in this comprehensive Vue.js tutorial. Understand the difference between ref() and reactive(), and how Vue's reactivity system works.

LOADING ENGINE...

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Select an unlocked node to view details root

Learn how Vue tracks changes and updates the DOM automatically.

1What is Reactivity?

Reactivity means that when the state (data) of your application changes, the DOM (UI) updates automatically to reflect that change. You don't have to write document.getElementById('text').innerHTML = newText ever again.

2The `ref()` function

ref() takes an inner value and returns a reactive and mutable ref object, which has a single property .value. You must use .value in JavaScript, but in the <template>, Vue auto-unwraps it.

3The `reactive()` function

reactive() takes an object and returns a proxy of that object. It does not use .value, making the code look like vanilla JS. However, you cannot destructure a reactive object without losing its reactivity.