Why the Vue 3 Composition API?

hi I'm Greg Pollock and in this video we'll be looking at why the composition API was created for view 3 we'll start by taking a look at the limitations of view 2 and then look at how you three solves these problems for us there are three limitations you may run into when using you 2 to create components the first is as your components grow and get bigger and uglier they become less readable and therefore less maintainable the second is that as you reuse pieces of code across components each of these code reuse patterns in view 2 has its drawbacks the third is that you 2 has limited type scripts support there's ways to write it with typescript but they're not completely optimal let's dive into the first limitation which is that large components may be hard to read and maintain let's imagine we're creating a simple search component you know a search bar that looks like this using the regular component syntax we would create a dot view file which might have a data option with reactive properties and our methods for our search logic once complete we realize we need some sorting functionality so we write up the code which also has some reactive properties and some methods our code for each feature as you can see is split up between two options things aren't too messy but they would be if we added additional functionality for say search filters and pagination the problem here is that logical concerns or features are organized by component options and there's a lot of component options in view things like components props data computed methods and lifecycle our feature code might be divided up into 6 different places and if you think about a more complex component having our code split up in multiple places just isn't as nice as having it all organized together which makes our component more readable and maintainable even in our simple example it'd be nice if our search code and our sort code was kept together and view 3 makes this possible using the composition API we can keep our components more readable this all starts with the new setup method inside of our components inside the new setup function is where we can start using the composition API syntax and this syntax is completely optional we can still continue to code up components like we have before using the regular syntax I knew when I first saw this I was saying wait does this mean I create a gigantic setup method with a ton of code and the answer here is no with few three you end up writing composition functions these are outside of your setup method and they could be in the same component file here you can see I have a used search function and a used sorting function these are called composition functions and they're called from inside the setup method as you see here don't worry we'll dive into the details of the syntax later for now just know that our code using composition functions can now be organized by logical concerns I want to point out that this doesn't mean our user interface has less components I'm not going to be writing each piece of my page in different composition functions I'm still going to have multiple components for each part of my user interface the second limitation of you two is that there's no perfect way to reuse code across components and let me show you exactly what I mean back in our search component there are three ways we could extract this code for reuse using view too the first is mix ins with mix ins first we would separate our code then we'd create a product search mix in create a result sort mixin and then include the mix ins in our component I'll shrink this down for simplicity a good part about this is now our code is organized by feature however with mix-ins you can end up with property name conflicts it's not clear if and how these mix-ins interact and we can't easily reuse this code to search and sort different things like maybe if we had a list of reviews or sellers or shipping options the second solution we might use with view two is by creating a mixin factory these are functions that return a customized version of a mixin here you can see we have our search mixin factory and then we have our sorting mixin Factory then inside of our component we import these two then we use each of these mix-ins specifying a namespace and any configuration we need for each of the factories so that it can sort products now the generic parts of search and sorting can be reused we also have clear relationships of how our features interact however namespacing requires strong conventions and discipline to do right we still have to look inside each mixin to see what properties it exposes and mixin factories can't be dynamically generated another solution that solves some of these problems in view to our scoped slots what might that look like well start out with a generic search component this has props and it has a slot we'll also have a generic sorting component which has crops for configuration and a slot then instead of our search component we use these components sending in configuration specific to Product Search this address is just about every downside of mix-ins however it does increase indentation which decreases readability some of our configuration ends up within template which ideally should just contain what we want to render exposed properties like Product Search are only available in the template and having three instead of one component instance means it's less performant and those are the three ways you could reuse code with you too however in view three we now have composition functions a fourth way to reuse code like before we have a file or a search functionality and a file for our sorting functionality these each contain composition functions which have a new syntax we'll get into in later lessons then inside of our search component we include these composition functions and use them inside of our setup method sending in any configuration they need the solution uses less code it also builds on your existing JavaScript skills since you're already familiar with functions it's much more flexible than mix-ins and scoped slots since their dysfunctions intellisense autocomplete and Taipings likely already work in your code editor the only downside here is that with view 3 now there are two different syntaxes for defining components the regular syntax and this advanced composition API hopefully now it's clear why the composition API is so useful in view 3 and I'm excited to start teaching you this syntax which you can dive into on my view 3 essentials course over on view mastery you can start learning free and we even have a cheat sheet see you there

Channel: Vue Mastery

Views: 98,699

Keywords: compositionapi, evanyou, learntocode, programming, tech, vue, vue 3 typescript, vue mastery, vue typescript, vue3, vuejs, vuetutorial

Id: 6HUjDKVn0e0

Length: 7min 33sec (453 seconds)

Published: Thu Oct 10 2019