Vue 3 Reactivity — Basics

Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner.

Photo by Kyle Hinkson on Unsplash

JavaScript variables are not reactive by default. JS Proxy provide the mechanism to achieve the reactiveness. Vue 3 adds the necessary abstraction on JS Proxy and makes it native and simple. Vue 3 Reactivity package is available as a standalone package.

reactive and ref converts the regular values to reactive variables.

computed and effect are high-order functions which are executed when the values in the reactive variables change.

• ref — Takes an inner value and returns a reactive and mutable ref object. The ref object has a single property .value that points to the inner value
• reactive — Returns a reactive copy of the object. The reactive conversion is “deep” — it affects all nested properties.
• computed method — Takes a getter function and returns an immutable reactive ref object for the returned value from the getter.
• To apply and automatically re-apply a side effect based on reactive state, we can use the effect method.

Vue 3 Basic Reactivity

reactive and computed method works with collections and array

Vue 3 Reactivity working on array of objects

A sample use case is shown below to highlight the working aspect of effect

Vue 3 Reactivity effect example

💡watch and watchEffect are part Vue 3 runtime core APIs and they in-turn use effect provided by the Reactivity package. On technical aspects, even computed use effect.

For future read —

• Reactivity in Depth
• Reactivity APIs