Coding Shorts: Vue 3.2 - Setup Scripts

hi this is sean voldemouth welcome back to coding shorts today we're going to dive into view 3.2 and a new feature called setup script this used to be an experimental feature is now a full-fledged member of the library setup script uses composition api but in a way that allows you to write the same code with fewer keystrokes i'm going to talk about why you might want to use it and why you might not want to use it additionally we're going to be talking about the dollar sign ref experimental feature that comes with setup scripts let's get started [Music] so with vue finally getting to 3.2 i want to explore some different things that are supported in this new version i've got a simple view project here and inside the source does have a couple of pieces like models and a way to get some data and we have some views but we haven't really implemented the views yet in fact if you're looking at your own projects you can see that view is just saying minimum of 3.05 but that doesn't mean that you aren't using the latest version so if we open up a console and we did in our project just npm upgrade and this is just to ensure that we're using the latest version of the libraries and because we're using this at minimum but use the latest we can actually go to node modules let's go down to view if we look at the package.json for that you will see that we're actually using 322 which is the latest version that i'm actually working with so we can close all that because now we know for sure we're going to be using 3.22 and so let's talk a little bit about some of the changes probably the biggest change is an experimental feature that is now a first class citizen so let's look at a a typical single file component like this straight up app view the main view that we're going to be showing and here we just have a simple template and you'll see this very common defined component creating a structure that shows what its name is what components are in it and often you would have things in here like either setup or using the options api to build up your application well there's a new feature called setup that some of you have done and what it does is it specifies that the script is going to use the composition api but that it's going to make this a little easier by using what's called this setup and this is a little bit of magic or some tactical sugar to make setting this up a little easier and we'll see in this older format in order to bring in components like our book view here that we'd have to add it to our project and then of course we'll need to import it right we could see there and then we could of course come up here and say book view and that would actually run assuming books view it was working what happens in the setup if you haven't played with this before is that it really wants to get rid of almost all of this and what it does is it takes whatever is in the scope inside the script tag and it exposes it as things that the template can work with and the simplest of these is actually the component so if we just import the books view here and do nothing else this is still going to work because this object is a member of that scope and the setup script is going to do the magic of oh i can export that i see it's a component therefore you should be able to create the components from that and that actually works let's look at something more typical like our actual books view in this case i haven't implemented a script section at all we've got our markup that's just going to show some books and allow you to just quickly check them out and we're going to be getting this from a service we have here so if we use a typical scenario here where i want to say script and i'm going to come down here and pick the composition ts which is from the tooling to create a typical scenario and that's where i would have define component brought in we would use define component to create this object that included a setup and this the setup if we had let's say count equals zero we'd have to return count as an object in order to use it here in the template so there's a lot going on here and in fact i really like this composition api version of it in that we're in control of a lot of what is happening in this scope but by adding setup here we can really simplify this we can say and that's it because this exists next scope it's going to allow us to use it here so let's do and actually implement this so i'm going to say const books and i'm going to assign it an array of book objects now these books are from the models i have this is actually an interface now that i'm using the book here we can see that typescript has said oh this is an array of books okay that's cool but we're also going to want reactiveness so i'm going to use ref which is a way in the composition api to say hey this is going to be something that i can change on the fly and how to use this i'm going to have to say import ref from view now just like we did before this code should just simply work right because we have a v4 here where it's going through one or more books and everything should be fine we still have a couple of elements missing like a checkout method and a cover path so what we really want to do here is first create a function called checkout and this is going to take one of those books and i can just say book dot checked out equals true this is just a very simple version of what we're doing and i'm going to tell that because we're in typescript that this is a book we have checkout but we also need to be able to have this cover path which is a way that i can construct a path and i can actually get this from my services library and i did the hard work of including it now notice i don't have to both with the checkout or with the cover path i don't need to return these in any way they're just going to be available in fact it knows in the template that these both exist now so if we were to run this project and i'm using vite or vt i'm going to continue to save for a while but what we're talking about isn't limited divide obviously now we can see that this is actually working we're not getting any errors but of course we're not getting the books either we've defined the books as just an empty array so we're going to need to have a way of saying unmounted which again also is from view this is going to allow me to make a quick arrow function that is called once this has been mounted and how are we going to do that we're going to do that by saying the result or response from a method called load books and i'm going to give it a category for those books and i'll call this uh science fiction the openlibrary.org site has these certain book categories that we can use and load books is asynchronous so i need to say wait here and if the response so if we actually got values back then we can go ahead and say books dot value equals response so how has this changed it ta-da it's getting those books it's actually going to work and in fact as we check these out it's going to continue to do what it's supposed to do right so we have this very simple version of where just what's inside the setup is just the pieces you need to set up for the page we don't have to worry about creating the function and those sorts of things so if you're used to the composition api you may be like well what about properties and what about emission and those sorts of things we can do those as well but the way they're created is by using a method called define props and this is just going to take an object where you can define those props and so in our case we'll say limit as a property and it expects a number in this case i'll actually go one bit further and say type is a number and if this format looks familiar it's the same thing you would do using the options api or just the simple composition api default is 50. and then in this case we can actually come in here now that we've defined that property and we can use it here to say props dot limit right whatever that property value passed in here we can use it as the limit if we refresh again you can see we're getting in our case 50 items but let's go back to the main app let's say limit five this will actually cause a warning because expects this to be a number and we're defining with a string so if we use data binding deck you say bind it to the value of five that actually works so let's come back here and if i refresh again we're getting our five that we defined in the controller as well and the last piece similar to this is you can define emits and what this takes are the names of each of the events that you can fire and then we can come down here into mounted and just say emit loaded and that would go ahead and fire that so so that we could up here actually handle the event itself and so now that the setup of the first class citizen is no longer experimental we can actually use this and we can see that this ends up being smaller than we would if we wrote other code though having control over this scope still makes me a little nervous about setup because some things like this on mounted call or parts of this that i don't want to necessarily have access to up here are going to be exposed to the template maybe it doesn't make that much of a difference longer term as long as i'm not using them but this idea that every variable i create in here or every function i create in here will be then available to the template makes me a little nervous you know me i don't like that much magic that's one of the reasons why i like the composition api but for those of you that want to use it you can now use it in clear conscience 3.2 has made this an official design now one of the things about the composition api that they've added here is being able to do something special with refs now as we saw here when we needed to apply the value here we needed to de-reference it by calling dot value and that's how ref works they've added an experimental feature which may or may not become fully used in a later version but it's called dollar sign ref and the idea here is they're going to do some syntactical sugar to where this dollar sign ref is going to allow me to assign our response directly to it that that value part goes away now it's not allowing me because i made this const right because the ref itself is no longer console i can go ahead and say let here and in this case there's no more dot value with the ref but once you turn it on you're going to need to specifically enable it as we can see in this error so if we come back to the invite config or you can also do this in the view cli in the view.config js we can add to the plugins here for view essentially to whether to allow that rough sugar to work or not and again this is only going to be required during its experimental use so that means now that we have that this dollar sign ref will now just continue to work we no longer get that error because that continues to work we're actually saying here's the books and assigning it directly and that works my name is shawn wildermuth thanks for joining me [Music] [Music] you

Channel: swildermuth

Views: 2,203

Keywords: Programming, Software Development, Vue, Vue.js, Composition API, Single File Components, SPA, JavaScript, TypeScript

Id: NZ08Epp4vD4

Length: 12min 43sec (763 seconds)

Published: Tue Aug 17 2021