Introduction to Composition API

Setup component

The setup component is an entry point for the composition API. It is called before all the components are created, and the props are prepared. It takes in two arguments;

1. Props
2. Context
    

Everything that we return from the setup() function gets reflected in the fundamental component(lifecycle hooks, methods, computed properties, etc.) and their templates.
 

<template>
  <div>
    <button> {{ label }} </button>
  </div>
</template>
<script>
export default {
  props: {
    label: String,
  },
  setup(props) {
    console.log(props); 
    return {};
  },
 };
</script>

Reactive variables with ref

In Vue, we can make any variable reactive with the ref() function. It takes the arguments and returns them wrapped within an object with a value property, which can then be used to access or update the value of the reactive variable. It creates a reactive reference to the variable.

Wrapping the values around an object might seem unnecessary, but it’s necessary for different data types in JavaScript. Wrapper class around a value allows us to pass it safely across our whole app without losing its reactivity.
 

import { ref } from 'vue'
const counter = ref(0)

console.log(counter)
console.log(counter.value) // 0

Counter.value++  // Increments the value
console.log(counter.value) // 1

Life cycle hooks

Life cycle hooks can be directly imported with ‘onX’ functions. They allow us to create, mount, update and destroy components and their props. 

Create hooks

These are the first hooks that run on a webpage. They allow you to perform any actions before adding the component to the DOM. They can be used to create and set things up into components on both server-side rendering and client-side rendering.  The hooks used are beforeCreate() and created().
 

Mounting hooks

These are the most used hooks by developers. These hooks allow you to access or modify your component before and after the initial render, but they do not run during server-side rendering. The hooks used are beforeMount() and Mounted().
 

Update hooks

The updating hooks are called whenever a reactive property used by the component changes or re-renders. These hooks allow you to hook into the watch-compute- render cycle for the component. The hooks used are beforeUpdate() and updated()
 

Destroying hooks

The destruction hooks allow you to perform actions when the component is destroyed, such as cleanup or analytics sending. They are called when your component is being torn down and removed from the DOM. All the destruction hooks are called on the client-side. The hooks used are beforeDestroy() and destroyed().

There are a few other hooks like deactivated() and activated(), which are used inside <keep-alive> components and allow the user to know if the <keep-alive> tags are toggled On or OFF.

Provide/Inject

The project and inject enable the dependency injections in Vue js. They can be called using setup() with a current active instance. We can rewrite a code using provide or inject.

Using Provide

We import ‘provide’ explicitly from Vue in setup() using the import statement. This allows us to define properties with their invocation of provide. The properties can be defined using two parameters:

1. The property name
2. The property value
    

<template>
  <MyMarker />
</template>
<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue'
export default {
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'Canada')
    provide('geolocation', {
      longitude: 56.13,
      latitude: 106.34
    })
  }
}
</script>

Using inject

We import inject in the same way we imported provide from Vue. after we import, we can expose it to our component. The inject function also takes two parameters:

1. Name of the property to inject
2. Default value(optional)
    

<script>
import { inject } from 'vue'
export default {
  setup() {
    const userLocation = inject('location', 'Universe')
    const geoLocation = inject('geolocation')
    return {
      userLocation,
      geoLocation
    }
  }
}
</script>

Template -Refs

We also have template-refs in composition API. The template Refs and reactive refs are unified while working with composition API. To obtain a reference of an in-template element or a component instance, we can declare a ref and return it from setup(). You can learn more about template refs from this article. 

The template refs in composition API can be used in two ways:

1. Usage with JSX
2. Usage inside V-for

Watching the template refs in Vue is an alternative to life cycle hooks in frameworks like Angular or React Js. The watch effects are run before the DOM element is mounted or updated in Vue.

Finally, we have discussed all the essential components, life cycle hooks, template- Refs, and methods in composition API.

Frequently Asked Questions

1. What is component API in Vue?
   The composition API in Vue helps us organize the components and group their features logically rather than their functions. This gives the developer greater flexibility while building a Vue application.
    
2. Why do we need composition API in Vue js?
   The composition API allows the user to collocate the reusable code with the same logical concerns for code maintenance and flexibility.
    
3. What are life cycle hooks in composition API?
   Lifecycle hooks in composition API allow the developer to know when your component is created, added to the DOM, updated, or destroyed. They are like a window to the working of the library behind the webpage.

Key Takeaways

This article introduced you to composition API, life cycle hooks, setup function, provide/inject, and template refs. Let’s discuss them again in brief.

• Vue js has components that allow developers to extract repeated parts of code and its functionality for code reusability.
• Composition API is a new way to work with the reactive state in a Vue application. It helps us organize the components and group their features logically rather than their functions. 
• The setup component is an entry point for the composition API. It is called before all the components are created, and the props are prepared. It takes in two arguments; props and context.
• Life cycle hooks can be directly imported with ‘onX’ functions. They allow us to create, mount, update and destroy components and their props. 
• The project and inject enable the dependency injections in Vue js. They can be called using setup() with a current active instance.
   

Hey ninjas! You might have got a clear understanding of composition API through this article. If you are interested to learn more about web development, we have found you the best course. Please check it out.
 

Happy Learning!