Video: Vue 3: Ref vs Reactive

Vue 3 handles reactivity for primitive values through the Ref function, which wraps the primitive in an object with getters and setters to facilitate reactivity.

A recommended pattern is to group Refs inside a Reactive object, which allows for easier management of related reactive properties and ensures that updates to individual Refs trigger reactivity as expected.

Ref is generally preferred because it explicitly shows reactivity with the '.value' syntax, works with any type of value, and maintains reactivity across reassignments and function passes. It's also easier to see at a glance that a value is reactive.

While Ref and Reactive can both be used to create reactive variables, they are not completely interchangeable due to their different handling of reactivity and types of values they support. Ref is versatile with all value types, but Reactive is specifically efficient for reactive object properties.

Ref can hold any type of value and requires accessing values with '.value', suitable for both primitives and objects. Reactive is used primarily for objects and does not use '.value' to access properties but can lose reactivity when destructuring or reassigning objects.

The Reactive function in Vue 3 only works on object types (like objects, arrays, or collections such as Map or Set) and the returned proxy object from Reactive does not have the same identity as the original object, which can lead to issues when destructuring or reassigning.

In Vue 3's composition API, you can add reactive state using either 'Ref' or 'Reactive'.