The vue team introduced vue 3, the composition api to address some of the limitions in vue 2 with a special feature call reactivity. In vue 2 (Options api) it was impossible to reuse codes or expose them globally such that they can be shared across vue components expect with the use of mixins and that comes with some drawbacks.
For those already used to coding in vue 2, at first you may find it boring or perhaps difficult working with the composition api in vue 3. However, has you walk along with me in the article, you see how easy it is to code in vue 3 as well as the benefits vue composition api brings to us.
Why Composition Api?
Vue 3 comes with some powerful features which allow vue developers reuse codes across vue components. With vue reactivity and composable, we can expose our codes globally across all compnents that need them. These key features obviously, differentiate it from the Options api in vue 2.
Here are some notable features with the composition api;
Reactivity: this is considered the core feature of vue 3. With the reactive api codes are easily reused, giving the developer the liberty of placing codes wherever they sole desire.
Composable: this is a function that leverages Vue Composition API to encapsulate and reuse stateful logic. It makes it possible to reuse logic across vue application. It also solves all limitations aff mixins as you will see in the later part of the article.
Script setup: this is a compile-time syntactic sugar for using Composition API inside Single File Components. What this mean is, we write less codes for the same purpose unlike the Options api, and support full typeScript.
It supports typeScript.
Going further, this article is divide into two sections. In the first section wie'll look at reactivity within a single file, while the second section we'll treat at reactivity within nested components.
Section One ( Reactivity within a single file)
Replacing data() with ref()
Replacing data() with reactive()
Replacing methods with functions
Replacing computed pro
watcher
Section two (Reactivity across nested components)
Emit
Props
Provide/Inject
Mixins to composable
Replacing data() with ref()
ref() is different from template ref attribute. The template ref is an html attribute that gives us reference to an html DOM element, while the ref() return a reactive and mutable object that serves as a reactive reference to the internal value it is holding.
Ref() is used to store primitive types (string, boolean, number).
The property store in the ref function is access by “.value” as we’ll see in the example below.
Here is an example to show how we can replace the Options api data() with ref().
Replacing data() with Reactive( )
Reactive( ) Returns a reactive proxy of the object. So, unlike ref() it can only be used to create reactive objects.
Here is an example to show how we can replace the Options api data() with reactive().
Replacing Methods with functions
Methods in vue 2 Options api has been replace with normal javascript function. Functions in vue are actions taking by the user when he interacts an element.
Here is an example to show how we can replace the Options api Methods with functions.
Replacing Computed in Vue 3
computed properties are cached calculations and recalculated only update whenever their dependencies change. They also do not allow side effect. Unlike methods or functions, it does not accept arguments being passed to it.
Here is an example to show how we can replace the Options api Computed property.
