Vue 3 & A First Look at the Composition API
HTML-код
- Опубликовано: 25 ноя 2024
- Vue 3 will be released in 2020 and it'll add one pretty neat nice feature: The Composition API. Time for a first look and introduction to this new, optional way of writing your Vue components!
Join the full "Vue - The Complete Guide" course: acad.link/vuejs
Check out all our other courses: academind.com/...
----------
Check the official Vue 3 Composition API RFC: vue-compositio...
And the API Reference: vue-compositio...
----------
• Go to www.academind.com and subscribe to our newsletter to stay updated and to get exclusive content & discounts
• Follow @maxedapps and @academind_real on Twitter
• Follow @academind_real on Instagram: / academind_real
• Join our Facebook community on / academindchannel
See you in the videos!
----------
Academind is your source for online education in the areas of web development, frontend web development, backend web development, programming, coding and data science! No matter if you are looking for a tutorial, a course, a crash course, an introduction, an online tutorial or any related video, we try our best to offer you the content you are looking for. Our topics include Angular, React, Vue, Html, CSS, JavaScript, TypeScript, Redux, Nuxt.js, RxJs, Bootstrap, Laravel, Node.js, Progressive Web Apps (PWA), Ionic, React Native, Regular Expressions (RegEx), Stencil, Power BI, Amazon Web Services (AWS), Firebase or other topics, make sure to have a look at this channel or at academind.com to find the learning resource of your choice!
![Vue 3 Composition API Introduction [FULL TUTORIAL]](http://i.ytimg.com/vi/bwItFdPt-6M/mqdefault.jpg)
![Twenty One Pilots - “The Line” (from Arcane Season 2) [Official Music Video]](http://i.ytimg.com/vi/E2Rj2gQAyPA/mqdefault.jpg)
If you want to skip review of Vue 2 options API, start video at 17:23
This is the best vue-composition-api tutorial ever, I understand everything that Max explained and talked about !!!
Max is simply the best 🎸
This composition API make Vue more and more like functional programing style which is awesome (I really like it when using React) :3
Max sir, you are the great teacher, I have learned VueJs, nodeJs and now I am learning angular 8 from your videos. your explanations and voice quality are awesome...
The new api is great. The proxy api enables reactivity, so you do not have to declare data and functions as different object properties which is great and now can easily split data and code.
I am really curious how computed is implemented under the hood, basically how that function finds out which reactive data are used inside its body. The only way I can think of is parsing the body of the function and finding out which values are passed from the closure.
mabey, some regx ??
Hi Max, I am missing the link to the source code. It isn't in text below the video. Thanks!
That was a great introduction to Vue 3 max... But I feel it's too much for simple to medium vue apps as the Vue 2 syntax is more predictable where you can find ur data.... Consider a 100 data variables are there and for making everything reactive we need to surround everything with the keywords reactive and ref... It's crazy
Why not mimic data object with one single reactive variable in setup?
setup() {
const data = reactive({
products: [],
show: false
})
...
return {
data,
...
}
}
I really like this new composition API. Looking forward for Vue 3!
@@GungooseHonk and what about all computed and watch elements in your component. Will you mimic it too?
It's too many data inside one setup method and with those reactive, ref and .value it becomes more difficult to read.
This is why is an alternative approach, use which one is best
It does look a lot like React Hooks. I feel that the Composition API will become a de facto standard, and may take away most of what makes Vue feel intuitive...
for what i understand the pro is that you can separate things in reusable javascript files
I love Max's videos. The composition API seems like more arbitrary code for no real gain. I like vue for its simplicity and the ease of use and this new way just feels like more over-engineered JS
Looks awesome! I didn't really enjoy working with Vue 2 as much as I hoped to, but with the new Composition API and better TypeScript support, I'll surely give Vue another chance (once it's out).
I don't know. Using a single setUp function to do several things - create composition parts; link reactive parts together, and returning the final "data" object smell. And how does one get dependency injection to work here?
The irony here is that composition problem is one of the fundamental concepts of OOP and this has been solved over 25 years ago. The twist here is one needs REACTIVE composition and even that has been solved by Reactive frameworks. This setUp approach seems to reinventing the square wheel.
First course I ever bought on Udemy was your Vue course. Your excellent delivery and subject knowledge has spoiled me and now I have to compare every course I watch with yours. I hope you are aware you are the gold standard in development courses. As always, your little snippet here doesn't disappoint in the least! I wait for the Vue course to be revamped or perhaps a brand new Vue3 one from scratch! Please, do a full C# course, I would pay gladly to watch you explain and demonstrate the intricacies of the language and its core mechanics.
Wow, I really want to thank you for your wonderful words Philip, this means so much to me! I will update the existing Vue course once Vue 3 is final, got no plans on C# at the moment though.
@@academind Wow, thanks a bunch for this. Also, really, when your delivery, your preparedness, your explanations and your in depth analysis is compared to the rest of the instructors out there, most of them eat your dust, for real! I mean, sure, Brad (Traversy) does a stellar job too and some others try hard, occasionally. But you present stuff from all angles and cover everything so succintly that even when something gets updated (a la React pushing for closures/hooks everywhere) the knowledge and software depth one gets from your courses allows someone to clearly stay on top of the new developments. Excellent job, excellent.
P.S. reconsider C#, I am aiming to slowly study it really well and go for the certification - and I know a course by you would be the ultimate preparation for it, so I am willing to pay top euro for it - i.e. I have only two kidneys but we can talk this through :P
Awesome tutorial, one question why pass functions to child components? Thought we should use events to do this kind of thing
This composition API really fixes my main issue with the framework. After a while it could get really hard to keep track of all the different things going on inside big components. I'm looking forward to using Vue with this API for my next personal project.
Max is Infinity. Superb stuff always.
You too bro. Your videos too always has deep information.
@@anandbaraik5010 Thanks man. Means a lot.
If I understand composition API correctly, it can add more performance in reactivity mode due to ability to control it manually compared to Vue 2. This can be very helpful on older mobiles with less powerful CPU.
One area that Svelte shines the most is in reactivity speed due to lack of VDOM and less automated DOM update.
I love functional programming, but I agree that this is a lot for even medium sized apps. Personally, I can see the value of this if you're creating a new project knowing you will have a lot of reusable code and large components. I have definitely struggled with data readability in larger components. Otherwise, I feel that the options api is better for me. Regardless, this is an incredible addition and goes to show just how much the Vue team cares about their framework and users.
Finally normal functional-way of writing things in Vue. Thanks Evan! ^^
The only thing I didn't like in Vue were the options, where you were limited to pass only object/array properties and nothing more
Max is max..💛 love max
Gary gaaaay
Teachers are next to god means Acharya devo bhava..not offensive word
Congratulations on a very well structured introduction to VueComposition API. I’m not sold to it however and it seems a high price to pay just to maintain some backward compatibility. These new levels of indirection and hidden magic traded for some lexical practicality... meh. I would have preferred if they broke the whole model and fused all this with VueX stuff in a really elegant approach. That is what major versions are for. This should have been 2.8.
You were not passing functions as parameters in Vue2 courses. So, why did you prefer it here: For brewity? In the absence of a Vue3 compatible Vuex? Or isn't it not an anti-pattern anymore?
Will there be a point where old syntax won't be supported
Unit testing would have been a great addition.
Thanks Max, that’s a great intro and alleviated my confusion around the Composition API. I have to say, I’m not sure I like it. Seems somehow dirty and messy. I feel like a neater structure would be something like this:
export default {
compositions: {
infoComposition: {
data() {
return {
showInfo: false
}
},
methods: {
// info methods
}
..etc..
},
productsComposition: {
data() {
return {
products: []
}
},
methods: {
// products methods
}
..etc..
}
}
}
And then just keeping all template syntax as-is.
Maybe I’ll come around to it after using it on a complex app.
Akifcan Kara thanks! 👍
Danny do you plan more courses for Quasar? All I know you have the only quasar-course in the planet and hence in Udemy. This alone is a wonderful Quasar intro, and well choosen classic Todo-CRUD app.
But I struggle whenever I want to change the boring quasar layout. For example I want a bootstrap style dropdown menu (complete drop-down of the toolbar). I've tried with q-expansion-item (accordion) but the all other elements of the toolbar, centered vertically when I've opened the expansion-item. So I've replaced it with btn-dropdown. But I use expansion-item in mobile version of the menu. I wished however a common solution for both cases, etc, etc...
For such nitty-gritty details one need more Quasar tips-tricks. Quasar is the best Vue framework and need more attention.
Hi 2002budokan. I don’t want to hijack Max’s video. Can you please ask this on one of my videos. 👍
There is no reason for so much boilerplate. The main reason for splitting into data and methods in the he first place was to declare everything returned by data as reactive internally.
Now you can just return a simple object, with data and functions and the data are already wrapped into a function making them reactive.
This api is much simpler and will greatly reduce code duplication.
It can also help reduce over splitting components just because this was the only way to split functionality
Actually, there is no difference your solution between Max used mixins.
Here is example making without using external .js files as you said.
codepen.io/navi3591/pen/RwNGYEZ?editors=1011
Never searched deeply but I think, this syntax is not totally for just "make code prettier or reusable for developers", the biggest reasons are performance and typescript. I would be in love if there is a official way to make Vue.js + typescript + .net Core with SSR support from Microsoft :)
How do you use the composition api with Vuex
Organization isn't a problem in typescript Vue applications, as everything is stored in a class with decorators used to define watchers, props, etc.
Pretty clear by now that the Angular team was right in making Typescript default language. Everybody else now scrambles to move in that direction 2-3-4 years later. Same with Observables and Rxjs support.
I'm still in a wait and see for Vue in terms of creating a large and scalable enterprise application. We evaluated for Vue and Angular last year for our large application and opted to rewrite it in Angular 8 and upgraded to Angular 9.
A question: Will your vue 2 course be updated to vue 3 or will there be a new course?
The current course will be updated once Vue 3 is final.
@@academind im not into the courses anymore BUT props to you for doing that.
Aha! Somebody get ridden "low coupling, high cohesion" and really think about it! :) Thank for this tutorial, its great! And it's totally clean for non-native speakers.
Love it! I could fastly learn advantages and how to use the Composition API. Thanks Max!
Thanks for that great course! But I couldn't see the start code link below the video. Regards!
great explanation!! but I am a little confused about why we don't need to return { isValid : isValid.value } at the end of ProductForm.vue setup method.
Finally i understood what the composition api is. It's like React Hooks... don't like it, i hope i will not be forced to use it 😃 but really thank you, your explaination is clear and i really understood everything, you are the number 1!
2AM
RUclips: Do you want to learn some Vue 3 new api
Me: Click
Looks awesome! What did you do in VS Code at 23:05 to get the return object to format nicely? Is that an extension?
prettier.io/
How come I can't see the starting project link. Was it scraped or something?
You mentioned that there is a link to the starting project below the video, but I can find nothing in the description? Is there a repo with the code anywhere?
you really a great teacher and this is the best channel in the world ,thanks very much for your great effort.
A lot of jealous React fanboys acting like Apple fanboys (every time Android comes out with a feature).
FYI: Hooks existed many years before React was created. Act like you knew.
If I could give you more than 1 thumbs up I would
@@anthoniG it's annoying because I just come here to learn.
I definitely don't waste my time bragging about Vue over in the React forums. What good does that do?
@@RorySilva Well people are weird lol. With some if you are not using a framework than them they get antsy. It's like Android and iOS all over again :(
What about us misunderstood EmberJS fanboys? 🙄☺️
@@JakobBjerrePetersen The right tool for the job! Can you solve the problem? Create a solution? In a reasonable amount of time? Go for it!
thanks max is vue 3 still in virtual dom or kanda like svelte
I didn't get yet what is the real advantage and difference using vue composition vs mixins. I can encapsulate all my logic and methods and separate it with mixins.
Very powerful, you can’t go back once you learn it. Is it ready for production?
You might want to revisit the concept of the exclamation mark
:P
Thanks from France ! Very good explanations, I use Vue only since 2-3 months and the organization of the code is a real problem for me (go to the data, and after to methods, search where is the function corresponding to my data etc..) That's boring, and these new features are perfects for me!
Sorry for my english lol
@Academind There doesn't seem to be a link to the sample project in the description any more...
Followed all of the links and none of them are the starter code... :(
Your Tutorials are very nice.kudos.Have some queries/comments
1. Passing a function to child component and executing in child scope doesn't look good to me
2. Mixins are good for vue.
3. I think you should have had a separate login component there
4. Why did vue team ignored mixin aliasing concept, instead they created this composition api?
Something like an instance of that toggleMixin with a name say login and then use login.toggle() and login.show
This is interesting, I'm wondering how this works with Vuex though. Thanks.
Yeah good question !
Only with vuex 4.0, it's in git repo separate branch
Flavio Konti I use vuex a lot. With something like this, might not need it as much
Basically, almost all of the lifecycle functions that were used in Vue 2 will be wrapped in the setup() function. I think this is good.
Just wondering what will happen to the $data function...
Hi Max, Where is the link to starter project?
if you check out the source code for 3.0, they are using js meta programming Proxy
Thank you for your help Max! Really appreciate these videos especially your efforts. Thank you!
Glad you like them, thank you!
which screen recorder do you use to making your videos) I'm also want to make tutorials in my country) Uzbekistan
Could someone post a link to the initial project Max is using?
Hi Max, an amazing tutorial (as always) I'd like to ask what do you think, is the composition API production ready already or should we rather wait until it's released in Vue 3.0?
Yo! Your english improved. Have an old VUE course as reference. Keep your great content and courses coming.
i am way too excited for a normal healthy life about vue 3 coming out!
Hello,
Where can I found starter and finished Project file?
is passing functions as props not considered anti pattern?
Could you provide an example how to work with $store, $router and etc, without access to this?
Should I import this via `import store from './store'`?
With this API, writing vue code now looks a lot like React with React hooks
and that is why I just switched to React. Because of also the work demand
Only for simple things, but if you work on something real then you'll appreciate Vue's composition API mainly because maintaining dependencies with react hooks becomes a nightmare.
In my opinion the best thing about Vue is its reactivity system (which ironically doesn't exist in react), this becomes more apparent when using react hooks and comparing it with Vue's composition API.
The only reason I would even consider using React instead of Vue today would either be:
1. React is more popular (has more jobs)
2. or some React only libraries which might be critical for some projects (like Drafjs or Slatejs).
None of which are technically React pros or Vue cons.
@@aan3387 Tiptap seems like a good replacement to Slate and Draft js.
Why do you send function to the component as prop?
It's not a good practice. Why don't you use "events"?
Thanks for the introduction. Quite an interesting new mechanism. By the way, there is no need to define a 'isValid' variable within the isValid computed function. You can just return false if the conditions are matching and 'true' after all tests.
Why would you fire the poor toggle product info? Has her performance decreased?
I really really thank you for this video. Happy to see you creating videos for vue
Is it possible to use the the class syntax?
Thank you, finally understand the api's use!!
Great video and very nicely explained. Thanks a lot.
Thanks a lot, it makes me more confident to migrate to Vue3 ;-)
I found style of writing composition API partially similar to the Reveling module pattern.
My jury is still out on this. I suppose when I start building much bigger apps with Vue, I will come to appreciate the composition API. Nevertheless, it is a wonderful addition to the features on Vue
Max you're full of action and always up to date; so thank you once more for all your great videos and your very detailed master-piece Udemy courses.
I didn't like the new API. I don't think it will be a success story. You say, useful for bigger components? Well, we should fight against bigger components. When a component becomes bigger, we should refactor it. Divide it to subcomponents, js modules etc. To me the Vue is the "Love at first sting", but I don't think that the new API is necessary.
Lastly, what do you think about the Danielo515's and olivier delmas comments below?
@no1youknowz Today I'm quasi forced to use the new API, 'cause I want to implement a component with XState inside. They provide two different methods for the injection of their Machine (StateChart) into a vue component. The first one using the old API, and the second one with the new composition API. And liked the injection via setup() method. I think it will take some time to get used to it.
everything is bouncing above my head. I always use pure js and I know ionic. Which is best for beginner to start among all react , vue , angular , nest etc ?
Don't hesitate to choose Vue, it has smoother learning curve and beloved by developers.
I had the same question a couple of years ago. I chose Vuejs. I am happy I made the right choice.
What is your vscode theme?
Some time ago I stumbled upon an article , which stated you shouldn’t pass functions in props, because there are emitters for that in Vue.js. I’ve never thought about it so much, but what do you think Max? I see that you do it here in the video and I was just curious :).
I did it here because I'm so used to it from React. You absolutely could use an emitter - I'd argue both is fine. You just have to be consistent. I do use both, depending on the project I work on.
Academind thank you for an answer man! Have a great day and keep on doing such a great work :)
why change name Lifecycle function ? onBeforeUpdate, onMounted, onUpdated .... name is long
Great vid as usually! Thanks a lot ! But i think it's better to stick with traditional vue approach until next version release and then all the things should be at right place. Now it looks like vue2 + comp-api = (rather)pain in s.
where can I download the source code? Thank you!
Hi max, big fan here. On the first look it seems to me an organizational code upgrade, let's give it a shot.
You're insame broh!!
Cool! Can't wait to use it in prod
I really like Vue.js, but I am not convinced with this new composition API.
Maybe my opinion changes with time.
Thanks Maximilan, you're the best!
Vue 3 course maybe Max, like the update to typescript you did for 2019
I will indeed update the existing course as soon as Vue 3 is final.
it's now past halfway in 2020 and it seems vue3 still hasn't come out as the default stable version. maybe in q4
Check news section on their site, it comes in august!
Vue devs: Vue is simpler than React
Vue authors: hold my coffee... 😂
Devs: I don't like react I think I will use cue
author's: Are you sure you really should be using react.
yeah my thoughts exactly... there goes the simplicity out the window :D
This is optional. You can build Vue apps just like before.
@@mortenfinkbuchhave641 It's optional
@@FilipCordas It's optional.
Vue 3 has just been released!
Vue 3 looks great! I really dislike how Typescript and JavaScript work together on the web. Seems to me (coming from a static/strongly typed & compiled language background) the best advantage of strong typing should be better performance.. js should be an add on for Ts. Since we're all usually transpiling our code already we're kinda getting the worst of both worlds -_-. I really hope web assembly will help solve this crap in future. Sorry for the off topic comment! Great video nonetheless though.
Thanks for this! Nice intro to the composition API
Thanks Max, I enjoyed the video, great work.
Hi Max Brilliant as always :) One quick question I have onMounted where event is getting data - my local LET variable is let club = reactive({}); how to set in one go variable club = data. It works if I define all properties first but I dont want that I just want pass object to let club = reactive({});
BTW it works IF I do:
let club = reactive({
data: null
});
and then in event club.data = data; BUT I dont want ot have extra club.data.id but club.id
Great video. Thanks Max. At this point I may as well switch to react. The reason I chose Vue was for the syntactic magic and less ceremony code. If I'm going to treat everything like pure functions then why use Vue at all? Svelte may be a nice replacement too. Much more idiomatic IMO.
Are you going to update the Vue course or make a new one
I will update the existing one.
Max, you are great teacher! Thanks and cheers from Russia =)
So happy to read that Alexandr! Greetings from Germany :)
When I do vue --version I get 3.8.4 as of December 12, 2019. So why do you say "vue 3 is not out yet?"
Is that your CLI version?
@@flogginga_dead_horse4022 Oh, that's it. That command is used to check the vue cli version, not Vue.js version itself. Thanks.
so it gets similar to react
Rewrite under the hood and your code won’t change? Angular team should learn with them. Oh I forgot Angular team doesn’t care...
Thank you for this video Max.
Thanks man! This was super useful! And helpful!
Amazing! Keep up the good work!
Thanks for your great efforts.
Great work as always !!