when to use data() and when to use setup() in vue3?

Question

I am still new to Vue and when I was using vue 2, I always used this:

data() {
        return {
           ....
        }
}
methods: {
  ....
}

but now I see a lot of docs with

setup() {
 const .....
 return { ... }

}

are these essentially the same? when would be a use case for data() vs setup()?

Oleg Naumov · Accepted Answer · 2022-02-17 01:54:43Z

8

In Vue.js 2 you have been using the so-called Options API. Vue.js 3 comes with the Composition API that can be used instead of the Options API.

Both ways are essentially the same and you can go with either one. However, you should understand the difference (for example, this doesn't refer to the component in the setup() method and you shouldn't use it).

The Composition API approach is better for various reasons explained in detail in the official FAQ. In short, it provides:

Better Logic Reuse
More Flexible Code Organization
Better Type Inference
Smaller Production Bundle and Less Overhead

You can still use the Options API, it won't be deprecated and is perfectly suitable for smaller projects.

I highly suggest reading this article about it: Why I Love Vue 3's Composition API.

answered Feb 17, 2022 at 1:54

Oleg Naumov

5971 gold badge3 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rain Man Over a year ago

This really helped, thanks

Collectives™ on Stack Overflow

when to use data() and when to use setup() in vue3?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related