script setup Exercise

[00:00:00]
>> Your mission, should you choose to accept it, is to go ahead and refactor the UsersPage that we've been working on. And this, I'm gonna use script setup to kind of trim down some of that code. And then if you have any props or emits you want to practice with, go ahead and do that.

[00:00:13]
And otherwise, keep on moving stuff in, playing around, seeing how you feel. Welcome back, everyone, how was the exercise? If anyone had any questions about how that went, please feel free to drop that inside of the chat. In the meantime, I'll go ahead and run through that solution.

[00:00:33]
All right, so switching back to cest-la-vue, Then run dev, great, great. All right, so we don't need to see what's happening right now. So we're just gonna actually just full-screen this so that people can go all in as far as what's going on. So what are we doing here, we are gonna go open up our user's page, and let's see what we got.

[00:01:03]
Well, everything's already been migrated, in that everything is inside of async setup, so this is good. So let's start by adding that setup attribute, that's the first step to do. Once you do that, you'll realize, okay, this is interesting, now we've gotta start deleting some stuff. So let's start deleting that export cuz we don't need that anymore, boom, gone.

[00:01:21]
Well, we mentioned before that all components are automatically registered once they're imported. So that's gone too, so we can delete that. And then finally, we already said that the script should be setup, so we can delete this block, too. And once we do that, you'll notice that the reactive, which was graying out earlier cuz it said it wasn't being used, basically, it detected the scope of the object and was like, I don't see it within the scope of the module.

[00:01:44]
But you're fine now because we've deleted all those exports, and we save that. We got one more bit actually, we can delete the return. And so now we can verify that everything is working. And just to make sure, we can just do a 123, there you go, did update, fantastic.

[00:02:02]
Now, the only other thing, too, is that we just wanna practice really quick using the define props and emits. The way that would work is let's go ahead and then say, conts props = defineProps. And we could say something like title, for example, and type: String, and then we can do a default of users.

[00:02:25]
And so to show that this works, we'll come inside of here. And let's start by saying this is a Test, so we test, great. And we can swap this out now for title, refresh, there we go. Now, something was brought up, though, regarding, wait a second, how did you call defineProps without importing it?

[00:02:48]
And more importantly, well, let me fix this part first, you'll notice that because we're not actually calling props anywhere, there's no actually need to do that. So you can actually just leave it off like this right now. But the question here around defineProps, why is it not yelling at us that we don't know what this is looking for?

[00:03:07]
So the reason this is the case is because when you're inside a script setup, basically the compiler knows that these specific functions are gonna exist. So in other words, defineProps and defineEmits, which I actually didn't clarify earlier, is only specific to script setup. If you try using defineEmits, defineProps inside of an options API, that'll just break, because why would you?

[00:03:26]
If you're in options API leveraging the setup, then you should already be using the other options. And so in other words, the compiler knows that it's technically already a global, so treat it like a global import for this. That said, though, I personally am typically a fan, especially if this is a newer codebase, to just leave the import explicit.

[00:03:45]
That way, no one new is like, wait, what's going on? There's no assumed knowledge here, we're good.
>> So why is reactive not like that?
>> Why is reactive not like that? So if we delete that and save, the reason for that is because reactive cannot be assumed in this context that it will be imported.

[00:04:04]
So in other words, to think of it another way, is that when this code is built and compiled, defineProps basically just reverts back to its normal self. If it's not detected, it'll get taken out, basically, so there's some kind of optimization happening. I can't explain the details of it, but there's a reason why defineProps is okay but then other helper methods like ref, reactive, Vue cannot intelligently guess those things.

[00:04:26]
So as a result, it forces you to be very explicit that you want to use these helper methods. So yeah, they're called, I think, compiler-specific helper functions, but anyways. And then the other thing we wanna practice is defineEmits. And that, once again, we can say something like update-user-list.

[00:04:45]
And so you can imagine how would that work. If a user clicked a button, that update-user-list, it would send it to the parent, maybe you have to send some new data down. That's how that basically might be working. Okay, nope, I think we're good. That's the thing in the event anyone here is coming from Vue 2 and if you're using Vetur as your VS Code extension.

[00:05:02]
Just a reminder to go ahead and basically disable, uninstall that when you're working on Vue 3 projects going forward because Volar and Vetur will basically collide, so just wanted to make that note. Here we go, by the way, you see this? So this is just a small, lets you know, defineProps is a compiler macro, no longer needs to be imported.

[00:05:21]
Again, it's not really gonna matter at the end of the day, cuz you see that it's not actually yelling at you inside of your code editor. But it is trying to let you know that it is technically a global import.