15

As the composition api of Vue has ported for the current version, v2, apparently we can start to use it before the release of the new version.

The examples generally feature a newly introduced setup() hook, and it is depicted alone and or along with basic JS functions.

At first glance I thought it is simply a place for initializing reactive data and I'd ask sth like: in what cases should it be used.

However, when you dig more, it looks as if composition API cannot be implemented without it. So, what is the thing with that hook and can it be used with data, methods, computed etc. fields outside it?

3 Answers 3

20

The composition API is really another way to do the same thing as before. Mainly:

  • The local state in data is replaced by a call to reactive.
  • Hooks mounted, beforeDestroy, etc. are replaced by subscriptions to onMounted, onUnmounted etc.
  • Declarations in watch are replaced by calls to watch.
  • computed properties are replaced by a call to computed in an object passed to reactive.
  • The setup function returns an object that contains a composition of all the things that have to remain accessible from outside the setup function, in particular from the template. And this feature replaces old methods.

I'd ask sth like: in what cases should it be used.

Nothing is deprecated, so you have now two ways to do the same thing and nothing prevents you from mixing if you want. Nothing except the composition API is better than the old way. And once you adopt it, you will completely abandon the old way of doing things.

See also: The motivation of the Vue's creator.

2
  • 2
    I don't really feel like this answered "when to use it". Apr 8, 2022 at 1:13
  • I came here because I didn't really understand the reasoning behind the changes with Vue 3. You really helped me there, also with the link to the explanation of the creator of Vue. Thanks! Apr 22, 2022 at 19:09
6

Yes, the componsition API is implemented with the setup() method. The usage of setup tells Vue that you want to use the functional approach of the composition API to implement the component.

The Composition API is a set of additive, function-based APIs that allow flexible composition of component logic.

example: how to implement data methods and computed in this functional approach

<template>
  <button @click="increment">
    Count is: {{ state.count }}, double is: {{ state.double }}
  </button>
</template>

<script>
import { reactive, computed } from 'vue'

export default {
  setup() {
    const state = reactive({
      count: 0,
      double: computed(() => state.count * 2)
    })

    function increment() {
      state.count++
    }

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

Note: the composition API is also available with Vue.js 2 as plugin (See for more details: https://vue-composition-api-rfc.netlify.com/)

2
  • 1
    Well, your note is not true: composition api is available in V2 too, as I have mentioned. See also demos by LinusBorg. Apart from that, may I ask for addition in your answer that good-old data, methods etc and composition api are mutually exclusive?
    – vahdet
    Oct 17, 2019 at 6:30
  • @vahdet, thanks I have updated my answer accordingly Oct 31, 2019 at 15:56
2

I know this is an old post but just placing this here for future visitors like myself:

The composition API is meant to solve the issue of maintainability and scalability by allowing you to reuse and share data and logic between components. This way you don't have to repeat the same logic in different components.

The composition API allows you to write all the logic in a separate "composable" function and import and use it in the setup() hook. You can still have reactive data properties, methods, lifecycle hooks, computed props, etc. in this composable function, but you have to import it from 'vue' and implement it a little differently.
Note: If you want to, you can still use the default data object, methods, lifecycle hooks, etc. in the component like normal, in addition to the setup() hook. Even if you're already using the same things in that setup() hook.

You could also just write all the logic inside the setup() hook, inside the component, as opposed to having it in a separate composable function and importing it, but that defeats the purpose of reusing logic between components. The upside with this is that you can write your own abstraction (as You says), be more functional orientated, and follow a React(hooks)-like structure, which could be preferable for people coming from React.

It's not necessarily better. It loses the structure, readability and aesthetics you get with using the options API (old way). Both have their use cases. It depends on what the goals and needs are for your project and team. I personally prefer the options API, but I would most definitely reach for the composition API when I need to reuse the logic in another component.

Here's a good tutorial that highlights some of the differences: https://www.youtube.com/playlist?list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.