Nuxt 3 Fundamentals Composition API
Transcript from the "Composition API" Lesson
>> So what we're gonna do now is I wanted to cover options API cuz this is where most people are starting from when they've heard of you and seen it. But now it's time for us to talk about composition API. And this is honestly where the bulk of the workshop is gonna be moving towards because while options API is certainly valid and it works with everything and I can't stress that enough.
[00:00:18] Options API is a valid approach to writing your components a lot of examples and a lot of the ways things are being used these days have some element of composition API. And so it's kind of unavoidable to learn the fundamentals of it. So basically, we're gonna opt into it just to show you what it's like in its full form, so that people can get some practice with it.
[00:01:18] So the composition API was the answer to that, so what I'm gonna do now is I'm gonna switch these now, so we're gonna go back to the zoo example. So now we're on branch 02 begin and we'll be updating the exercise branch and preparation for everybody, all right?
[00:01:34] So let's make sure we have our to do app up and running so let's refresh, there you go. Natural server built beautiful, all right, there we go, we have our to do list viewer. Okay, so composition API, how does this differ from options API? Well, first thing first is we're gonna basically get rid of a lot of the way it's being defined right now.
[00:01:55] So first thing first, this whole export default object. This just disappears, this goes by all of that disappears. And so the next thing we need to do though is we need to actually then basically tell us that we're using composition API. And the way this is typically done is with the setup life cycle hooks, so actually let me undo this real quick just to demonstrate this.
[00:02:31] In other words, they don't come with any Vue magic by default. Whereas when we're looking at options API stuff here, right, with methods, you see we can refer to this. And then computed then there's also global imports you get with routes and so there's a lot of magic that again it's not everyone's cup of tea.
[00:02:47] But it's there it's been helpful for some situations but when we want to configure everything ourselves composition API is the answer. So what we're gonna do is because when an authentic pure composition API, we're gonna use what is known as the script setup block. And so what you're essentially doing is telling the script block and the compiler that we're gonna just skip that as an API and we're only gonna work with in the setup.
[00:03:09] So let me just actually I'm just gonna comment this out, so that it doesn't yell at us. And so let's go ahead and map over the various things, shall we? The first thing first is the photo gallery, so typically you might be like okay, well what I might do is I'll do let photoGallery = an array.
[00:03:47] And that will be basically what's set as the reactive reference, so that is the equivalent of what we just did here with data. Next, we have some computed properties, right, so let's go ahead do that. So the computed property here, I'll just make those conts. So we have here const number of photos, okay?
[00:04:23] All right, there we go, but then remember, this doesn't exist, especially with the arrow function because the arrow function resets to this context. So what do we do? Well, you might think, okay, yeah, photo gallery, this This should be good, right? But we have to remember that photo gallery is not just an array.
[00:04:38] It's not a variable that can just point to and get the value of because reactive references in view need to be unpacked. Without diving into proxies and stuff, just know that it's a way for you have to actually manually tell it, I wanna get something out of it.
[00:04:50] And there's something nice about this syntax, right? So basically the way we do that, as we said, we wanna get the value out of it. And so this is how you say, okay, I want the length of the photo gallery value. And let's go ahead and now do that for the rest of them for even an odd.
[00:05:05] So let me just copy this one here. And then we'll do const even albums equals computed and then just like this and then reset save what we solve a problem because this does not exist. So reset that to .value and then that's looking good. And then once again, let's go and just clone this cuz this will be easier than me copying that.
[00:06:15] Because we skipped the step of like showing you composition API within options. But never use composition API within the options API. You actually need to return explicitly what you wanna use. But one of the things that you get as a benefit of using script setup is there's a bunch of compiler optimizations.
[00:06:30] And so it basically automatically knows like for example you'll notice here is this a number of photo is declared never used because it actually knows that inside of the template. It's going through basically all the reactive references and being like it doesn't exist. And that's true because, what did I say about one off errors?
[00:06:45] I forgot the s that's why it's actually breaking. So I just need to add the s here and then I forgot I just need to replace this value with .value. And this here is our equivalent of what we did with options API in composition API. You have a question?
>> Yeah, although it might be an unnecessarily digression-
>> No, go for it.
>> So I see you're using the ref helper function, I know-
>> Sometimes you can also use Reactive for non-primitives. Is there a particular rule of thumb around that I notice this?
>> No, that's a great question.
[00:07:17] So when it comes to reactive references, as we just explained, there's ref here. But as artfully pointed out, there's actually something else called a reactive helper method. And so it's worth clarifying here. So let's say we have another let's say that we have like a new photo objects.
[00:07:32] All right, you could technically just do a ref with an object. But what you might see in some code bases as well is the reactive helper method. And the key difference with this is that let's say we just have id 1, 2, 3 title, best photo ever. So the difference with these two things is let's go ahead and actually let me copy this and just for now, just for the sake of comparison, these two things are let's say, best photo ever to, okay?
[00:07:58] So when you refer to these properties in the ref, we said that you actually need to unpack it. So if I wanna refer to the title of the photo gallery, it'd be photoGallery.value.title, that's what you'd have to do. But in every active object, you actually can just go a newPhoto.title.
[00:08:15] Now some of you might be interested going, that's the one for me, I wanna type less. And that's totally fine, right? And that's exactly how I felt. But as I mentioned before the beginning of this workshop, like decisions in our code bases are all about trade offs. One of the things that was aptly pointed out to me is that a library author preferred ref.
[00:08:31] And the reason for that is because it made it very clear when you use a dot value, that it was a reactive reference being utilized. Because otherwise, if you just see like a new photo, that title being randomly like, again, our code is short enough that you can make the connections.
[00:08:45] But once it's long, you're just sort of like, okay, new photo.title, guess I assume it's reactive or is it a lead? Is it a constant so technically, it does provide it that's off the skate that declarative nature a little bit. So again, is there one is better than the other?
[00:09:00] I say whatever your team prefers. For now, we'll be using REST though because I think this is the one that people tend to shoot themselves in the foot with it. Because it's easy to forget to unpack it and when you don't unpack it then things break. So we just want to give you.
[00:09:14] So at least as far as the examples I'll be showing you, I just want to show you the rough example because react if you just decide to use it. It'll feel really natural like you normally use the desktop for example it'll feel really natural for those of you who are used to that