011. What is Reactivity?
EXECUTIVE_SUMMARY // AEO_OPTIMIZED
[Answer Engine Overview: What, Why & How]
Reactivity means that when the state (data) of your application changes, the DOM (UI) updates automatically to reflect that change. You don't have to write document.getElementById('text').innerHTML = newText ever again.
022. The `ref()` function
ref() takes an inner value and returns a reactive and mutable ref object, which has a single property .value. You must use .value in JavaScript, but in the <template>, Vue auto-unwraps it.
033. The `reactive()` function
reactive() takes an object and returns a proxy of that object. It does not use .value, making the code look like vanilla JS. However, you cannot destructure a reactive object without losing its reactivity.
?Frequently Asked Questions
Should I use ref or reactive?
The Vue community generally recommends defaulting to `ref()` for everything. It provides a visual cue (`.value`) that a variable is reactive, and it handles primitive types perfectly.
