# Composition API in Vue3

###### tags: `Vue3`

### Table of Content

[TOC]

### Why Composition API ?

* Why Composition API is used in Vue3. Let see wat are the main drawbacks in Vue2 first.
- Readability issues as component grows.
- Code reuse pattern has drawbacks in Vue2
- Limited Typescript support.
* How component structure looks like in Vue 2


* Vue 3 solves this by new composition API syntax.


**Note:** This is optional, you can still write code in earlier syntax as well.

* Composition API syntax.


* This leads to having our code more organised.


* In Vue2, No perfect way to reuse logic between components. We have mixins, but its still have below drawbacks.


* We can also have mixin factories and import that code in components and use.


* But this still have below drawbacks


* We also have scoped slots in Vue2, still has few drawbacks.


* Now in Vue3 we have 4th way of reuse the fucntions using **Composition API**. Only drawback is now we have the normal and advance syntax to use in Vue 3.


* Composition API is just more advance syntax. So when to use this?
- If you need more typescript support.
- Components is too large and needs to organised by feature.
- Need to reuse code across components.
- Team perfer this syntax.
* Setup method is first executed before anything in lifecycle hook.


* **Props** in setup method is first argument.


* **Context** in setup method is second argument.


* Reactive reference.



* Return things that needs access from template


* We can also use composition API in Vue2 as well. So in Vue2 you need to import like below to use.


* How the regular method is written usually in Vue2.


* Using Vue3 composition API, how we can write our methods? Just like normal javascript functions.


* We cannot directly increment the object, as it reactive reference.


* We need to increment like below


* But in template you don't need to use `capacity.value` to show the capacity value, because Vue automatically expose the inner value by default.


* How to write computed property in Vue 3


### Reactive Syntax

* Alternative reative proporty declaration syntax.


* If you use `recative` then no need to use `.value` in the computed property. And also instead of returning the computed property to display the value in template, you can return the entire event.
* Template now reference the event object. But to display the value everytime you need to use `event.`. To solve this check below `toRefs`

* Using `toRefs` to create reactive reference.


### Modularizing

* This is our current code.


* Move into function to organize by feature


* To make the code reusable across other components, move the code into an file & export it. Then in our component import it.


* Adding another composition function into the component.


* But here, we don't see what objects are been returned from which function. To solve this we can create local objects like below and return it. This explicitly shows which objects being received from composition function.


### Lifecycle hooks

* These are the lifecycle hooks provided by Vue earlier.


* Below are some of the new Vue2 lifecycle introduced.


* In Vue3 below lifecycle can also be used as new name. Changed just for better naming convention.


* When using Composition API, how to use the lifecycle hooks.


* These are the lifecycle hooks can be used inside the setup method of composition API.


* Created hooks in composition API.


* Two new lifecycle hook is added in Vue3 for better debugging purpose.


### Watch

* Setup() is called only once like when component is loaded like `created()` hook.


* So in order to use watch with reactivity, you need to use **watchEffect**


* Watch syntax to monitor specfic changes.


* Watching multiple data sources using array.


* If you use watch `Number of events` starts out to be empty. watch is lazy load by default, as didn't get run on initial load. So inorder to get it run on initial load, you need to use `immedidate` as `True`


* Whats the difference between `watchEffect` and `watch`
- `watchEffect` takes only single argument which is callback. `Watch` will take mutlipe arguments including the reactive components we need to watch.