VueJS Composition Basics

VueJS Composition API is a new approach to building VueJS applications. It provides a way to organize code and reuse logic across components. VueJS Composition API allows developers to split the application logic into reusable modules, making it easier to manage and scale the project. It is designed to be used with Vue 3.

Syntax

import { reactive } from 'vue'

setup() {
  const state = reactive({
    message: 'Hello VueJS Composition API!'
  })
  
  return {
    state
  }
}

Example

<template>
  <div>
    <p>{{ state.message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({
      message: 'Hello VueJS Composition API!'
    })

    const changeMessage = () => {
      state.message = 'New message from VueJS Composition API!'
    }

    return {
      state,
      changeMessage
    }
  }
}
</script>

Output

The output of the above example will be a button and a paragraph:

Hello VueJS Composition API!
[Change Message]

After clicking the button, the paragraph will update to:

New message from VueJS Composition API!

Explanation

The VueJS Composition API uses the setup() function to organize code and reuse logic across components. The reactive() function is one of the core functions in the Composition API, which takes an object as an argument and returns a reactive proxy of that object. The setup() function must return an object with properties that represent the public interface of the component.

The example above shows how to use the Composition API to change the message displayed in our template. We use reactive() to create an object with a message property and a changeMessage() function to update it. We then return this object from the setup() function and bind it to our template.

Use

The VueJS Composition API can be used to organize code and reuse logic across components. It provides an alternative to the traditional VueJS Options API, which can be hard to manage and scale as the project grows.

The Composition API allows developers to:

• Organize code into reusable modules
• Share logic across components
• Compose components with reactive data
• Optimize code for performance

Important Points

• The Composition API is an alternative to the Options API in VueJS.
• The setup() function is where the Composition API logic is located.
• The Composition API provides functions to organize code and share logic across components.
• The reactive() function is used to create reactive data objects.
• The Composition API can improve code organization and performance.

Summary

The VueJS Composition API is a powerful new approach to building VueJS applications. It provides developers with a way to organize code, share logic across components, and compose components with reactive data. Understanding the syntax and use cases of the Composition API can greatly improve the overall design and functionality of your VueJS project.