Suggest an editImprove this articleRefine the answer for “reactivity VS data binding”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)**Data binding** is a mechanism in which data from the model is automatically reflected in the interface (and sometimes the other way around). **Key point:** reactivity is a deeper concept that tracks dependencies between data and computations at the code level, rather than just syncing data with the DOM.Shown above the full answer for quick recall.Answer (EN)Image## 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): ```javascript <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): ```javascript 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 ```javascript input.oninput = () => { p.textContent = input.value } ``` -> just copies the value from the field into the element. ### Reactivity (Vue) ```javascript 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".For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.