Suggest an edit

Improve this article

Refine the answer for “Declarativeness 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)

**Declarative approach** is a way of describing the interface and application logic through *describing the result*, rather than *step-by-step instructions*, as the imperative approach requires.

---

### The core idea

In Vue.js you **describe what the interface should look like depending on the data state**, rather than *exactly how* to change the DOM to arrive at that interface.

Vue itself tracks the state and updates the DOM when the data changes.

---

### Example: declarative vs imperative approach

#### Imperative (plain JavaScript)

```javascript
const list = document.getElementById('list');
list.innerHTML = '';
for (let item of items) {
  const li = document.createElement('li');
  li.textContent = item;
  list.appendChild(li);
}
```

Here we **manually manage the DOM**: clear the list, create elements, insert them - that is, we describe *how* to reach the goal.

---

#### Declarative (Vue.js)

```javascript
<ul>
  <li v-for="item in items" :key="item">{{ item }}</li>
</ul>
```

Here we **declare** that "there should be a list on the screen displaying the `items`".
Vue itself determines *exactly how* to update the DOM when `items` changes.

---

### Advantages of the declarative approach

1. **Less code** - no need to describe every step of updating the interface.
2. **Cleaner logic** - the developer thinks about data, not DOM manipulations.
3. **Reactivity out of the box** - Vue automatically reacts to data changes.
4. **Readability and maintainability of the code improve.**

---

### How this is implemented in Vue.js

- **Reactivity**: Vue tracks data dependencies (via Proxy) and knows which parts of the template need to update.
- **Virtual DOM**: when data changes, Vue recalculates the virtual representation of the interface and updates the real DOM minimally.

---

### Summary

> **The declarative approach in Vue.js** is when you describe *what should be displayed*, not *how to do it*.
> Vue takes on all the routine of changing the DOM, tracking dependencies, and syncing data with the interface.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.