What is reactivity and how does it work in Vue? What is the difference between reactivity in Vue 2 and Vue 3?

Reactivity in Vue is a mechanism for automatically tracking data changes and updating the interface without manually managing the DOM. When reactive state changes, Vue automatically updates all related components.

In Vue 2, reactivity is implemented through Object.defineProperty, where getters and setters are created for each property of an object, monitoring reads and writes. This imposes limitations: it cannot track addition of new properties or deletion, and reactivity does not work with arrays and objects added after initialization.

In Vue 3, reactivity is built on Proxy — a more powerful and flexible mechanism that intercepts all operations on an object, including adding and deleting properties. This makes reactivity more complete and performant, and simplifies internal implementation. Additionally, Vue 3 offers the Composition API, which is closely related to reactivity and allows more flexible state management.

Example of reactivity in Vue 3 with Composition API:

import { reactive, watch } from 'vue';

const state = reactive({ count: 0 });

watch(() => state.count, (newVal) => {
  console.log('Count changed to', newVal);
});

state.count++;

Thus, the main difference is the transition from defineProperty to Proxy, which expands capabilities and improves the performance of the reactive system.