Vue js Composition API
Introduction
Vue’s Composition Pattern presents an alternative method of constructing components compared to the Declarative Syntax Model (commonly referred to as Options API). It’s more adaptable and modular, though it demands stronger conceptual understanding.
Modular Code Crafting
Instead of declaring data, computed values, and actions inside clearly named objects, Composition design allows one to employ explicit functions imported from Vue’s core library to describe behavior directly.
This form empowers advanced developers by offering refined control and more logical grouping, especially when creating features involving complex state or side effects.
Functional Example – Typewriter Tracker
Let’s illustrate it with a mini-interface managing inventory:
<template> <p>Remaining devices: {{ machines }}</p> <button @click="discard">Take Away One</button> <p>{{ remark }}</p> </template> <script> export default { data() { return { machines: 10 } }, methods: { discard() { if (this.machines > 0) this.machines-- } }, computed: { remark() { if (this.machines > 5) return "Ample amount" else if (this.machines > 0) return "Scarce left" else return "Completely gone" } } } </script>Explanation of Structure
<script setup>simplifies the syntax, enabling direct template usage of functions and values.ref()introduces reactive variables—machines is bound reactively to the interface.- The
discard()action performs a count deduction when clicked.computed()builds a derived value—remark changes based on inventory state.This paradigm demands explicitly defining reactivity using ref and computed, contrary to the automatic nature of the traditional pattern.
Contrast: Traditional Declarative Style
The earlier method (Options API) groups logic via named keys inside an exported component object. Here’s a parallel written using that format:
<template> <h2>Sample Case</h2> <img src="/img_typewriter.jpeg" alt="Old device" /> <p>Remaining devices: {{ machines }}</p> <button @click="discard">Take Away One</button> <p style="font-style: italic;">"{{ remark }}"</p> </template> <script> export default { data() { return { machines: 10 } }, methods: { discard() { if (this.machines > 0) this.machines-- } }, computed: { remark() { if (this.machines > 5) return "Ample amount" else if (this.machines > 0) return "Scarce left" else return "Completely gone" } } } </script>Summary Comparison
Feature Composition API Options API Reactive values Must import and declare with ref Auto-detected under data Logic grouping Flexible and function-based Separated into data, methods, computed Template access Direct under setup Uses this keyword Best suited for Large, complex features Learning, simple logic
Previous Next Prefer Learning by Watching?
Watch these YouTube tutorials to understand VUE JS Tutorial visually:
What You'll Learn:
- 📌 #46 - Composition API Basics - Vue 3 Tutorial
- 📌 What is the Composition API? (Vue 3)