Reactivity and declarativeness

#1. What "declarative" means

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

  javascript

  Copy

  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

  Copy

  <template> <button @click="count++">{{ count }}</button> </template> <script setup> import { ref } from 'vue' const count = ref(0) </script>

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:

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

---

#4. A simple analogy

Imagine describing a formula in Excel:

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