reactivity VS data binding
1. What simple data binding is
Data binding is a mechanism in which data from the model is automatically reflected in the interface (and sometimes the other way around).
An example of classic "two-way binding" (for instance, in AngularJS):
<input ng-model="message">
<p>{{ message }}</p>When the user types text, the framework updates message,
and the <p> changes too.
But under the hood this works through event listening and manual checks (dirty checking, the digest cycle, etc.).
So this is simply a synchronization mechanism between data and the DOM, not a full reactive system.
2. What reactivity is
Reactivity is a deeper concept: it is a system that tracks dependencies between data and computations at the code level, not only at the DOM level.
Vue does not just know "this data is bound to this template", it also knows which computations, which computed properties, which watchers depend on specific properties.
Example (Vue 3):
import { ref, computed } from 'vue'
const count = ref(1)
const double = computed(() => count.value * 2)If count changes, Vue automatically recalculates double,
even if that value is not displayed anywhere in the template.
This means reactivity works at the level of data logic, not just at the level of "binding a field to text".
3. The key difference
| Criterion | Simple data binding | Vue reactivity |
|---|---|---|
| What updates | Only the DOM | Any computations, components, and effects |
| How it works | By watching form fields and event-based updates | Through Proxy, dependency tracking, and reactive effects |
| Support for computed values | No (must recalculate manually) | Yes, automatically |
| Control over dependencies | No (everything updates on any change) | Precise subscription to specific properties |
| Level of operation | Shallow (DOM <-> data) | Deep (data <-> computations <-> DOM) |
| Performance | Less efficient (often re-renders everything) | Optimized, only the needed dependencies |
4. A comparison example
Simple binding
input.oninput = () => {
p.textContent = input.value
}-> just copies the value from the field into the element.
Reactivity (Vue)
const state = reactive({ message: 'Hi' })
effect(() => {
p.textContent = state.message
})-> Vue itself tracks the dependency,
and when state.message changes it triggers an update automatically,
without knowing where or how it is used.
5. To sum up
Simple data binding is "update the HTML when the data changes".
Reactivity is "update everything that depends on this data - logic, computations, template, components".
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.