Suggest an edit

Improve this article

Refine the answer for “What is reactivity in Vue.js?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**Reactivity in Vue.js** is a mechanism through which the framework automatically tracks changes in data and updates the user interface (DOM) without the need to manually intervene in the process.

In other words, when you change a property of the `data` object or a variable in `setup()`, Vue "sees" that change and updates the parts of the interface that depend on that data.

#### How it works

1. Vue "wraps" data using a **proxy (Proxy)** or (in older versions) via `Object.defineProperty()`.
2. When a value is read, Vue "registers" a dependency between the component and that property.
3. When a value changes, Vue "notifies" all related computations and components that the data has updated.
4. The component **re-renders**, but only the parts where that data was used.

Example:

```javascript
const state = reactive({ count: 0 })

function increment() {
  state.count++
  // Vue will automatically update the template where state.count is used
}
```

---

### Why reactivity is needed in Vue

Reactivity is the **foundation of automatic UI updates** and development convenience in Vue.

#### Key benefits:

1. **Less code**
You do not need to manually manage the DOM, you just change the data, Vue does the rest.
2. **Simple synchronization of state and interface**
Data in `data()`, `computed`, or `ref()` always reflects the current state of the application.
3. **Powerful computed properties**
Vue tracks dependencies and recalculates values only when needed.
4. **Performance optimization**
Vue updates only the parts of the DOM where the data changed, using a dependency system and a virtual DOM.
5. **Easier debugging**
You can visually track reactive state via DevTools and know exactly what is updating.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts272 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.