Building Pinia From Scratch

Both ref and reactive are ways to create reactive objects in Vue. ref is used for primitive values like numbers, strings, and booleans, and requires accessing the value using .value. reactive is used for objects and allows direct manipulation without needing .value.

Reactive only works with objects because Vue tracks reactivity through the access of properties. Primitives like numbers, booleans, and strings are immutable in JavaScript and cannot be tracked or changed directly. You can only create new versions of them.

Unwrapping in Vue refers to automatically accessing the value inside a ref or a computed property when it's placed inside a reactive or another ref. This means you don't need to use .value to access the value, as Vue handles it automatically.

store to refs is a function that allows you to extract properties from a reactive object while keeping their reactivity. This is useful for splitting a reactive object into separate refs that can be used independently while staying connected to the original reactive object.

The main difference is that ref is used for primitive values and requires using .value to access the stored value, while reactive is used for objects and allows direct access to the properties without needing .value.

Vue handles reactivity for objects by tracking the access and modification of their properties. For primitives, Vue uses refs because primitives are immutable in JavaScript, and Vue cannot track changes directly. Instead, you must create new versions of the primitive values.

Provide and inject in Vue are used to pass data from a parent component to its descendants without prop drilling. It's commonly used in libraries to provide global properties, but can also be useful in coupled components to share context-specific data implicitly.

In recursive components, provide can be used to pass down data like depth or other context-specific information. Each child component can inject this data to determine its behavior based on its position in the component tree, enabling features like conditional rendering based on hierarchy depth.

Using provide/inject for global state in SSR applications ensures that each request gets its own independent instance of the global state. This prevents cross-state pollution where data from one user's request could leak into another user's request, which is crucial for security and data integrity.

Using symbols as keys in provide/inject ensures unique identifiers for the injected properties, preventing conflicts and making sure that the injected values are not accidentally overridden by other values with the same key.