Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

vincent15000's avatar

Help to understand ref, reactive and setup in a VueJS 3 component

Hello,

I need help to understand what's a composition API for each the entry point is setup(). I never had any setup() method in my VueJS components. What is the benefit of a composition API compared to the other way ? And why is it called API ?

I also often see ref and reactive (I have seen reactive in the VueJS documentation for the forms and in InertiaJS to handle the forms). Is it better to write the form as a simple data() or is it better to user reactive ? And why ? I see that reactive works with Proxy and ref with getter and setter, but I don't understand deeply the difference between both approachs.

Thanks for your help to understand these three keywords.

And thanks for your help me to understand is there is a best pratice (with or without any of these keywords).

V

0 likes
4 replies
martinbean's avatar
Level 80

I need help to understand what's a composition API for each the entry point is setup(). I never had any setup() method in my VueJS components. What is the benefit of a composition API compared to the other way ? And why is it called API ?

The Vue website explains why you might choose to use the Composition API over the older, “Options API” that you are probably more familiar with from Vue 2: https://vuejs.org/guide/extras/composition-api-faq.html#better-logic-reuse

As for why it’s called “API”, it means API in its true sense (application programming interface), i.e. the interface you use to program Vue components, and not an API in the sense of a remote web service. Just like you would use the UIKit API in an iOS app. An API in this context is more like a library and not a web service.

I also often see ref and reactive (I have seen reactive in the VueJS documentation for the forms and in InertiaJS to handle the forms). Is it better to write the form as a simple data() or is it better to user reactive ? And why ? I see that reactive works with Proxy and ref with getter and setter, but I don't understand deeply the difference between both approachs.

Well ref and reactive and their kind are again, part of the Composition API. If you use the Composition API, then these are the keywords you’ll be using to build your Vue components and define references, reactive properties, computed properties, and so on.

Whether it’s “better” is up for you to decide; it’s just a different way of defining components. Have a read of the page on the Vue website I linked you to above, and you can decide for yourself whether you want to learn how to build components using the Composition API. However, a lot of developers using Vue 3 are doing so with the Composition API. There’s no plans from Vue to deprecated the older, Options API, but you may find yourself seeing less and less components using the Options API “in the wild” as time goes on if current trends are anything to go by.

1 like
vincent15000's avatar

@martinbean Thank you ... yes I had already read the documentation, but it was not clear in my mind about the fact it is simply a new way to write the components with VueJS 3.

It is explained that the composition API is better for several reasons (best logic reuse, more flexible code organization, ...).

Perhaps I had a too fast look at the documentation, I will read it more deeply.

I have still some difficulty to understand what are the reactive properties. As I understand it for the moment, it looks like data(), isn't ?

Please or to participate in this conversation.