DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > The Difference Between the Composition API and Options API in Vue

The Difference Between the Composition API and Options API in Vue

Let's look at the two main ways you can create components in Vue

Johnny Simpson user avatar by
Johnny Simpson
CORE ·
May. 09, 22 · Web Dev Zone · Tutorial
Like (1)
Save
Tweet
2.73K Views

Join the DZone community and get the full member experience.

Join For Free

Up until Vue 2, there was one way to create components in Vue. With Vue 3, a new methodology was introduced called the Composition API. Now, if we want to make a component in Vue, we have two ways to do it. You might be wondering what the difference is, exactly, so let's take a look at how the newer Composition API differs from the Vue 2 methodology, which is now known as the Options API

What Is the Difference Between the Composition and Options API in Vue?

The short answer is syntax. The Composition API lets us create components without the need for a large single exportable object, like in the Options API. For example, if we wanted to make a simple counter component with the Options API, it would look like the code below.

Options API

Vue.js Component
 
<template>
    <h1>{{ counter }}</h1>
    <button @click="incrCounter">Click Me</button>
</template>
<script>
export default {
    data() {
        return {
            counter: 0
        }
    },
    methods: {
        incrCounter: function() {
            this.counter += 1;
        }
    }
}
</script>

If instead, we wanted to write the same code with the Composition API, it would look like this.

Composition API

Vue.js Component
 
<template>
    <h1>{{ counter }}</h1>
    <button @click="incrCounter">Click Me</button>
</template>
<script setup>
    import { ref } from 'vue'

    let counter = ref(0);

    const incrCounter = function() {
        counter.value += 1;
    }
</script>

You'll notice a few differences:

  • We imported something called ref - this lets us create reactive variables
  • When we increase the counter, we actually increase counter.value, since ref returns an object.
  • We avoid having to use an entire prototype, and instead just have a single incrCounter function

Reactivity in Composition API

Along with ref, we can also use reactive for objects. Both of these give variables reactive capabilities, meaning we don't lose any functionality.

The Benefits of the Composition API

As you can see, the composition API is a lot more streamlined than the Options API and requires a lot less code. It also has the added benefit of compartmentalizing code. Let's consider a silly example with two counters - one button increases the output by 1, and the other by 2. In the Options API, we could write that like this:

Vue.js Component
 
<template>
    <h1>{{ counter }}, {{ doubleCounter }} </h1>
    <button @click="incrCounter">Click Me</button>
    <button @click="increaseByTwo">Click Me For 2</button>
</template>
<script>
export default {
    data() {
        return {
            counter: 0,
            doubleCounter: 0 
        }
    },
    methods: {
        incrCounter: function() {
            this.counter += 1;
        },
        increaseByTwo: function() {
            this.doubleCounter += 2;
        }
    }
}
</script>

In the Components API on the other hand, it might look like this:

Vue.js Component
 
<template>
    <h1>{{ counter }}, {{ doubleCounter }} </h1>
    <button @click="incrCounter">Click Me</button>
    <button @click="increaseByTwo">Click Me For 2</button>
</template>

<script setup>
    import { ref } from 'vue'

    let counter = ref(0);
    const incrCounter = function() {
        counter.value += 1;
    }

    let doubleCounter = ref(0);
    const increaseByTwo = function() {
        doubleCounter.value += 2;
    }
</script>

The difference is small, but you might notice something interesting - on the Composition API, all the related code stays close together, so you don't have to look around as much. In the image below, you can see that, where code with similar functionality is highlighted in the same color.

On the right, the Composition API keeps its code all in the same place. On small projects, this doesn't make a big difference - but on larger ones, maintainability increases.

Other Benefits to the Composition API

  • Replaces mixins, and all the issues such as name collisions that come along with them.
  • Better type support, since it uses most normal functions and variables, no complicated typing is required in TypeScript.
  • Smaller files - as mentioned, the Composition API requires less code.

Do I Need To Use the Composition API Now?

No! There is no reason to switch your code to the Composition API if the Options API still works fine for you. The Options API isn't going anywhere, and instead, the Composition API provides an alternative means to create Vue components.

In some cases, the Options API may still be a better option for you (pun not intended).

Is the Composition API Better Than the Options API?

There is no simple answer to that question. Both methods have their merits, and they may be useful in certain situations. Whatever you decide to go with is totally fine, but the Composition API does solve some of the issues the Options API brought along with it.

API

Published at DZone with permission of Johnny Simpson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • The End of the Beginning for Apache Cassandra
  • What Are Cookies in Servlets?
  • Why Performance Projects Fail
  • This Is How You Give Good Feedback at Work

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo