Using the Script Setup Block

[00:00:00]
>> We were talking about options API and the bridge over the composition API. And then, we went ahead and basically showed you what it was like to only use composition API, where we've moved everything into the setup function. But I did promise you that all that boilerplate, we were writing while there is a, the grass is greener on the other side, and it truly is, because something that came out recently with Vue 3.2 and above is the concept of script setup.

[00:00:24]
And so before we dive into code, I'm gonna do some slides just to give you just like a basic overview, so that helps you, hopefully explain things a little bit better. So here we have a view component. As you can see here, we have our script. And then, as we can see here, we're using the options API to actually set everything up with composition API.

[00:00:42]
So there's your setup lifecycle hook. We can see that this is a standard counter app with a count of ref(0). We have a computed property, for example, we have a method to increment the count. And we've returned everything in the object, fairly standard from the composition API perspective.

[00:00:56]
Well, one of the things we realized, though, is that this is still a lot of boilerplate, considering that a lot of people are opting into competition API for certain components in a pure fashion. So how might we make this better? Well, first thing first. We went ahead, and we're going to say we're gonna assume the entire script block is gonna be a set of lifecycle hook.

[00:01:14]
So that's why you see we move the server setup attribute moved all the way up into that script block. So now script has an attribute of setup which tells the compiler, hey, we are now in pure setup lifecycle hook function. And so what does that mean? That means we can get rid of an export default object because we're gonna do some compiler optimizations that we can assume based on the fact that we're only working in script setup.

[00:01:36]
Then on top of that because we can now do some basically view can do some magic as far as detecting what's being used in the template and what not, we can actually get rid of the return object entirely. And so at the end of the day, this code works exactly the same as everything else that you saw earlier.

[00:01:56]
Okay, so let's go ahead and see that in action, shall we? So what we're gonna do is we're going to take the restaurant page that we've been working with, and we're gonna trim it down into the script setup format. So first thing first, we're gonna add the setup attribute here.

[00:02:12]
And what you notice that immediately is that basically it starts to say, hey, a lot of these things you're talking about, they're not being used. So for example, we can get rid of this defineComponent. So that can just get deleted. So let me go ahead on the bottom, cuz now the whole thing is a script setup, we don't have the options API anymore.

[00:02:31]
So this helper method goes away and then because the components are automatically being registered on import, we don't need to manually register them either. So those are going bye, bye, and then here we don't need to set up here. Why? Because well, we already have the setup attribute being defined up here in the script block.

[00:02:50]
Then, if I scroll all the way down, there's the other one. And then, finally, we can delete all this return stuff, and then that's it. Do you not have your script set a block? And everything still leverages view of the way you want it to, but it's basically more of that vanilla JavaScript land and then sprinkling helper methods where it makes sense.

[00:03:12]
And so now that I've done that and showing you how that works, we're gonna have you have a quick try at that. So given that this is mainly just kinda like a refactoring exercise, we're just gonna give it five minutes just for people to practice doing this. And so, let me go ahead and actually set this up real quick.

[00:03:26]
Okay, so, now if you check out the four exercise branch, that will let you go ahead. And, like we said, on your dishes page, you're gonna do the same exact thing, where we're gonna strip away, all the boilerplate, and get you down into that script setup blog. So hopefully that was mostly an effort in shipping data components.

[00:03:48]
So we're just gonna do this real quick together. So, once again, first thing do we wanna use the script setup block, add the setup attribute. Then we can go ahead and delete this export line, we can delete the components line. We don't need setup anymore, I'll deal with that in a little bit.

[00:04:03]
We don't need any of this return block, we don't need any of this at the bottom. I think we save. We're mostly there, just need to eliminate this and that's it. Now you have your script setup block, and it looks great. And so going forward for the rest of this workshop we're gonna base to use the script set up block syntax.

[00:04:22]
And so now you've seen that journey, and so hopefully everyone can follow along from this point on.