What is the Composition API? (Vue 3)

Подписаться 30 тыс.

Просмотров 16 тыс.

50% 1

The Composition API is the biggest new feature that appeared with the release of Vue 3. But what is the Composition API?
👉 Vue 3 Composition API Course: dannys.link/compositionapi
👉 Watch Half of Course Free: dannys.link/compositionapifree
⬇ Chapters: ⬇
0:00 Introduction
0:48 Group Relevant Code Together
2:57 Reuse Code Easily (Composables)
The Composition API gives us a new way to create Vue Components - an alternative to the Options API.
We can still use the Options API in Vue 3, however I would consider using Composition API exclusively, especially on more complicated Vue apps and Vue Components.
The Composition API solves two main problems that we can encounter with the Options API, especially on larger apps:
- 1. It allows us to group relevant code together more easily in the script sections of our Vue components
- 2. It allows us to reuse our code across components more easily (using composables)
👉 Vue 3 Composition API Course: dannys.link/compositionapi
👉 My Courses - dannys.link/courses
👉 Download Fudget: www.fudget.com
👉 My VSCode Setup - dannys.link/vscodesetup
👉 DONT CLICK THIS - dannys.link/dontclick

Опубликовано:

30 июн 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 73

@MakeAppswithDanny 2 года назад

Please Like, Share, Subscribe & Comment - it all helps me create more content for you! 👉 Vue 3 Composition API Course: dannys.link/compositionapi 👉 My Courses: dannys.link/courses 👉 Download Fudget: www.fudget.com 👉 My VSCode Setup: dannys.link/vscodesetup 👉 DONT CLICK THIS: dannys.link/dontclick

@Hex-hunter 2 года назад

Thank you for the video, great as always ! love your courses also !!

@MakeAppswithDanny 2 года назад

Thanks a z! 👍

@VolkunSports 6 месяцев назад

you nailed the concept when masked the code for clarity.

@MakeAppswithDanny 6 месяцев назад

Thanks 👍

@davidpile2576 2 года назад

Thanks Danny. Nice little into to composables

@MakeAppswithDanny 2 года назад

Thanks David!

@dekebaoe 2 года назад

Awesome as always, 👍 Thank you Danny

@MakeAppswithDanny 2 года назад

Thanks Basar! 👍

@jobnigussie3326 2 года назад

Danny, you're the best teacher 👍👍👍👍

@MakeAppswithDanny 2 года назад

Thanks Job! 👍

@medslk9753 3 месяца назад

thank you , you explained the concept really well

@MakeAppswithDanny 3 месяца назад

You're welcome 👍

@0-Will-0 2 года назад

Really nice demo of why composition api is worth using.

@MakeAppswithDanny 2 года назад

Thanks Will. Yeah I thought it was needed. I haven’t seen a good explanation of why the flip I should switch to it anywhere. It’s only through using it to create a complex app that I finally see the benefits 👍

@aspirinemaga 2 года назад

In Vue 1 and 2 we've learned how to properly distribute and have organized chunks of code across the SFC (.vue). In Vue3 Composition API we are trying to forget about that and smash them together. Simplicity and well organized code was the root why I stayed with vue when it was 0.1v

@evolutionx1 2 года назад

Options should be the default and Composition only used for rare cases where you can't do it with Options.

@aspirinemaga 2 года назад

@@evolutionx1 that's absolutely right. I should be glad for still being able to use options api in vue3 anyway

@MakeAppswithDanny 2 года назад

@@aspirinemaga good points guys. I felt the same way at first. I really didn’t like Composition API at first. But after spending 12 months working on a complicated app with it, I will NEVER go back 👍

@stefanonesi8712 Год назад

@@MakeAppswithDanny I'm still in the stage where i hate composition API. But, i know that i'll eventually switch to Composition anytime soon, and convert options to composition is really boring, so...

@MakeAppswithDanny Год назад

@@stefanonesi8712 Check out my Vue 3 Composition API series it might change your mind: ru-vid.com/group/PLAiDzIdBfy8jr-ccMU8ymPn7o85RAZ_6T

@hakimov_dev 2 года назад

Awesome bro )

@MakeAppswithDanny 2 года назад

Thanks Hakimov!

@CCDevYt 2 года назад

Danny if you would not mind. Make a informational video about Vue Router 4 too. Thank u :)

@MakeAppswithDanny 2 года назад

I will be covering Vue Router 4 in the full course, Clint! And also a bit here on RU-vid. 👍

@saeed17 Год назад

Thanks for the clear, concise explanation and easy-to-follow examples.

@MakeAppswithDanny Год назад

Thanks Saeed!

@eberguerra3002 4 месяца назад

Siento que los composables aumentan la cantidad de archivos, y si se reducen en un archivo pero al final van a crecer en otros, la manera en la que estaban antes estructurados tenía un enfoque donde sabias donde podía encontrar todo, no se no me gusta mucho el nuevo estilo 😅

@MakeAppswithDanny 3 месяца назад

Ése es un punto razonable. 👍

@universecode1101 2 года назад

The composition Api is a game changer for Vue.js 🔥 Nice Danny ✌🏻

@MakeAppswithDanny 2 года назад

Definitely. Especially since Script Setup! 👍

@bobobobo-ki2fw 11 месяцев назад

Thank you.

@MakeAppswithDanny 11 месяцев назад

You're welcome!

@Viktorres1 9 месяцев назад

Thanks Danny from your Udemy student)

@MakeAppswithDanny 9 месяцев назад

My pleasure!

@dipanshu2207 2 года назад

great video! One question, why would you want to use a state management system like Pinia when simply using a composable/composition api state management? I had built a small app, which I used the composition apis state system and its easy and intuitive to work with, I have no experience with Pinia but for my purpose, I never really felt I needed a separate state management system, so in what cases I might want to use it?

@bartduisters3455 2 года назад

If you want a similar approach to what you have been using, but also want Vue Devtools integration. Which allows for 'time traveling', which means you can see what your frontend looks like with different states. It also allows you to edit the state directly from the plugin and see the result live. If you have a small application and feel no need for the Vue Devtools functionality, you are probably just fine with the composition approach.

@MakeAppswithDanny 2 года назад

Yes like Bart said. The only real benefit is debugging capabilities (via Vue Devtools) 👍!

@dipanshu2207 2 года назад

Great, thanks guys

@nickoquiamco978 2 года назад

does the composition API and options API have a difference in terms of performance ?

@MakeAppswithDanny 2 года назад

I’m not sure, but the the Vue 3 codebase has some indications that it’s more optimised for Composition API than Options API. I talked about this in one of my other videos 👍

@punithgowda6723 2 года назад

Cool

@MakeAppswithDanny 2 года назад

Thanks Punith!

@jofftiquez Год назад

I'm a bit iffy about the multiple onMounted hooks, wouldn't it be weird that way? I mean I'm totally down for it if it is, I just don't know if it's "normal" thanks.

@MakeAppswithDanny Год назад

It's up to you. You can have a single onMounted if you like, and put all your logic in there. Or use multiple, to separate concers.

@salva-dev 2 года назад

Thanks for your videos (and your great courses) , Danny. This video has made me think that maybe we should also use Composition API in vue 2 (and quasar v1) developments in my team in order to migrate easily (we're going to migrate to vue 3 but we must support IE11 this year 😓 ) . Do you think the same?

@MakeAppswithDanny 2 года назад

I don't know, I guess you need to look at how long it would take to switch over, and whether it's financially worthwhile at this point. But if time & money are not obstacles, I would say go for it 👍

@TyronC199 Год назад

Sold

@MakeAppswithDanny Год назад

Me too! 👍

@tanzimibthesam5861 2 года назад

Will course be available at Udemy?

@MakeAppswithDanny 2 года назад

Yes it will Tanzim

@FloodGold 2 года назад

Okay hurry up ha just kidding - I'll get anything you create whenever you make it available.

@MakeAppswithDanny 2 года назад

@@FloodGold haha. Keep an eye on RU-vid today around 12pm 👍

@bharathhs1161 Месяц назад

Always options api

@hakimov_dev 2 года назад

First like me )

@MakeAppswithDanny 2 года назад

😂

@MrBotv0091 2 года назад

Danny, you look tired. Take care of yourself. Thx 4 info.

@MakeAppswithDanny 2 года назад

Yeah not been sleeping much lately. Been going through a separation while recording this course … 🙁

@flogginga_dead_horse4022 2 года назад

@@MakeAppswithDanny sorry to hear that!! I know what you mean!!

@MrBotv0091 2 года назад

@@MakeAppswithDanny This one sucks. Hold on, bro, your students are with you!

@Tarabass Год назад

Only opinion. What about performance, testing, migration, schooling.

@James-li8cm Месяц назад

this honestly looks more complicated... the only good thing it does is allow you to block your code out... my recommendation instead is: make smaller components use service classes for reusable code.

@alexlytle089 2 года назад

I personally prefer the options API. Its simple easy to use

@MakeAppswithDanny 2 года назад

I know what you mean, Alex. I felt the same way for a long time. Look out for my Composition API series starting very soon. It may just change your mind a little bit 👍

@alexlytle089 2 года назад

@@MakeAppswithDanny Thanks Danny looking forward to it.

@adriatic123 6 месяцев назад

Options API is not RIP but well and prospering. Composition API is a fad, syntactic sugar without a single benefit (for example in code execution speed and size). More and more programmers realize that, while they are forced by their managers to be 'more modern'. I immediately know that such manager doesn't have the basic knowledge about Vue.

@flogginga_dead_horse4022 2 года назад

one of a few things that ruined Vue for me...

@MakeAppswithDanny 2 года назад

😂 I know right. I HATED Composition API for a while. It really annoyed me. Love it now though, after creating a big app with it 👍

@flogginga_dead_horse4022 2 года назад

@@MakeAppswithDanny I don't like all the "refs" and such. Also have a big application that used BootstrapVue and that project died at version 2. Even Vuetify still doesn't work with 3, luckily Quasar does!!!

@flogginga_dead_horse4022 2 года назад

@@MakeAppswithDanny Hello, I just wanted to revisit this comment. I totally hated composition even after reading many things about it and looking at other training. After going half way through your Udemy class you have totally changed my mind!! I never saw it compared so well to options. It really does scale better. On the other hand it's like a completely different version of Vue and it's like starting over. I wish this was how it was done to begin with. Also I have a large project using Vuex and to have Pinia suddenly be the best practice is kind of annoying. Some of the decisions Evan makes have really messed up my projects. Another example is VueCLI and UI seemed like a really good way to manage projects and seemed like the standard and then along comes Vite and makes it all obsolete. All these changes make it nearly impossible to write apps without immediate technical debt. Sorry to write a novel. Enjoying your course!!

@MakeAppswithDanny 2 года назад

@@flogginga_dead_horse4022 Glad to hear you are starting to enjoy Composition API. I know, the changes are annoying, but that's just the bummer that comes with all tech, it's always changing. It took me 3 days to convert Fudget 2 over to Pinia (instead of Composable State Management). 👍