Vue 3 Reactivity — Basics
Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner.
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
andref
converts the regular values to reactive variables.
computed
andeffect
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 valuereactive
— 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.
reactive
and computed
method works with collections and array
A sample use case is shown below to highlight the working aspect of effect
💡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 —