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