Suggest an edit

Improve this article

Refine the answer for “Reactivity and declarativeness”. 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)

## 1. What "declarative" means

- **Imperative approach**: you **tell the browser yourself** ***how*** to update the interface.
Example (plain JS):

```javascript
  const countEl = document.querySelector('#count')
  let count = 0

function increment() {
    count++
    countEl.textContent = count // manually update the DOM
  }
  ```
- **Declarative approach**: you **describe** ***what should be***,
and the framework itself decides *how and when* to update the interface.
Example (Vue):

```javascript
  <template>
    <button @click="count++">{{ count }}</button>
  </template>

You just declare the dependency between `count` and the template -
Vue **watches it itself** so the UI always matches the data.

---

## 2. How reactivity makes this possible

It all comes down to **automatic dependency tracking**.

When Vue renders the template:

- It "reads" the values of reactive variables (`ref`, `reactive`).
- It automatically **remembers** which parts of the interface depend on which data.
- When that data changes, Vue **itself updates only the parts of the DOM that need it**.

You don't need to manually call `render()`, `setTextContent()`, or `appendChild()`.
That is declarativeness: you **describe the state**, not **manage the update steps**.

---

## 3. The key idea

> **Reactivity -> automatic UI updates -> declarativeness**

Without reactivity, Vue would have to be an imperative framework -
you would have to write code like:

```javascript
watchEffect(() => {
  document.querySelector('#count').textContent = count.value
})
```

The reactive system does this automatically, *invisibly to the developer*.

---

## 4. A simple analogy

Imagine describing a **formula in Excel**:

```javascript
= A1 + B1
```

When A1 or B1 changes, the result recalculates **automatically**.
You don't write "if A1 changed, recalculate C1" by hand.
That is reactivity, and it's exactly why Excel, like Vue, is declarative.

---

## 5. Summary

| Characteristic | Imperative approach | Declarative approach (Vue) |
|---|---|---|
| Who updates the DOM | The developer | Vue (via reactivity) |
| What the code describes | Step-by-step actions | State and dependencies |
| Main mechanism | Events, manual changes | Reactivity (Proxy, ref, computed) |
| Example | `el.textContent = count` | `{{ count }}` |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.