Suggest an edit

Improve this article

Refine the answer for “What does reactive() do?”. 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)

`reactive()` is a function from the Composition API (Vue 3) that makes an **object (or array) fully reactive**, turning it into a **Proxy** that tracks reads and changes to its properties.

In simpler terms:

> `reactive()` **makes an object "alive": Vue watches all of its fields and updates the UI when they change.**

This is the main reactivity tool for **objects, arrays, Map, Set**, and complex data structures.

---

## What reactive() looks like

```js
import { reactive } from 'vue'

const user = reactive({
  name: 'Alex',
  age: 25
})
```

Now Vue watches **all** the object's properties: `name`, `age`, as well as any nested objects.

---

## How do you work with reactive?

#### Reading:

```js
console.log(user.name)
```

#### Changing:

```js
user.age = 30
```

Vue will see the change and update the UI.

---

## Example in a component

```vue
<script setup>
import { reactive } from 'vue'

const form = reactive({
  name: '',
  email: ''
})
</script>

<template>
  <input v-model="form.name">
  <input v-model="form.email">
  <p>{{ form.name }} - {{ form.email }}</p>
</template>
```

---

## When should you use reactive()?

#### 1. When you need to store **several fields**

Forms, complex objects:

```js
const form = reactive({
  name: '',
  email: '',
  age: null
})
```

#### 2. When the data has a **nested structure**

```js
const profile = reactive({
  address: {
    city: '',
    street: ''
  }
})
```

#### 3. When you need reactive collections

Works with:

- Object
- Array
- Map
- Set

---

## Important features of reactive()

### 1. **No need to access it through** `.value`

Unlike `ref`:

```js
user.name = 'John' // correct
```

### 2. **Do not destructure it directly**

Loss of reactivity:

```js
const { name } = user  // reactivity lost
```

Correct:

```js
import { toRefs } from 'vue'
const { name } = toRefs(user)  // reactive properties
```

### 3. **You cannot replace the whole object**

Like this, reactivity is lost:

```js
user = { name: 'New' } // not allowed
```

You can only change properties:

```js
Object.assign(user, { name: 'New' }) // correct
```

---

## How is reactive different from ref?

| Characteristic | ref | reactive |
|---|---|---|
| Type | any value | only an object/array |
| Access | `.value` | like a plain object |
| Replacement | can be replaced entirely | the object cannot be replaced |
| Primitive types | required | not suitable |
| Nested structures | no proxy by default | deep reactivity |

---

## Example: reactive for an array

```js
const items = reactive([1, 2, 3])

items.push(4)      // reactive
items[0] = 10      // reactive
```

---

## Summary (perfect for an interview)

> `reactive()` **is a Composition API function that turns an object, array, or collection into a reactive Proxy.**
> **Vue tracks changes to all properties, including nested ones.**
> **Used for forms, complex objects, and data structures.**
> **Unlike** `ref`**, it does not require** `.value`**, but does not let you replace the object entirely.**

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.