All right, in my project, let's have a look at any of these page views. How about this one right here? And I wanna point your attention to this script that looks pretty different from what we've been used to. First of all, what is this setup here? We never looked at that. Now, to be honest, there's actually a couple things going on here. We have macros set up as well as a different API entirely. But first, why don't we just reproduce this the way that we are comfortable with? We import our component, and then we export an object where we register the component.

Next we have lifecycle hooks. You can do this when the component updates or when the component is created or when the component is mounted. And then there's also an API to help with dependency injection. We haven't reviewed this just yet. That's a bit more of an advanced topic, but we'll definitely get to it soon. So if we wanted to play around with this, yeah, what you see here is us leveraging the Options API. So if we wanted to do something when the component is mounted, I could say I have been mounted. If we want some reactive data, then we could, as we've always done, return an object.

So if we wanted to do something when the component is mounted, I could say I have been mounted. If we want some reactive data, then we could, as we've always done, return an object. Hello world, like so, and reformat. And then maybe down here we could have our message. Yeah, all of this should be very much a recap for you. And if I switch to Chrome, there's the alert and there is the message. Okay, so let's switch this over to the Composition API and we're going to do it in two steps. First, we'll migrate to the Composition API, and then second, we will return that script setup attribute, like this, that will add a few conveniences. Okay, so first up, we're going to get rid of all of this, we'll comment it out, and

setup attribute, like this, that will add a few conveniences. Okay, so first up, we're going to get rid of all of this, we'll comment it out, and I will add a setup method. And notice that keyword setup, very similar to what we had up here. Okay, so now in our setup method, I will return any data that should be reactive, like this. Return message is hello world. Okay, so now if I come back and give this a refresh, that all still works. Okay, so now we can see, when I'm using the Composition API, I can create a setup method, and if I return an object from that setup method, it's almost equivalent to our options API, where we returned an object.

and if I return an object from that setup method, it's almost equivalent to our options API, where we returned an object. But now we do it from setup. But next, I want to display an alert when the component is mounted. And you'll remember, if we switch back, Composition API consists of a set of APIs that we import. And one of those APIs is the various lifecycle hooks. Okay, so we're going to import that now. Import onMounted from vue. And this is kind of a key thing with the Composition API. When I want to perform various actions, whether it's doing something when the component is

But now, there's still more confusion here. Let's do this. Let's come back down where we have our message, and let's add another paragraph where we have an input, and I will set v-model to that message. Okay, so if I come back, notice if I change this, oh! That's not what we expected, is it? I changed the input. We're using v-model, so I would have expected this input change to update the underlying message property. But it didn't.

message property. But it didn't. But it did when we were using the options API. Okay, so this is an important thing to understand. Right now, we've returned message, but we haven't declared that it should be treated as reactive data. Right now, it's just a string. And in fact, we could create a message here. Hello world. But yeah, it's not going to make any difference.

Okay, let's give it a shot. So this is what I mean. It gets a little confusing until you grasp some of these basic concepts, and then trust me, you'll be able to go back and forth between the options API and the composition API without even thinking. It's just that initial roadblock as you figure out what some of these concepts are. Okay, so now I will declare that message should be reactive. So I wrap it within a ref. Okay, so if I come back and give this a refresh, I bet it's going to work now. I change the input, and now we also update the underlying property.

Okay, so if I come back and give this a refresh, I bet it's going to work now. I change the input, and now we also update the underlying property. But it actually gets even a little more tricky. So let me show you something. First, let's get rid of onMounted, that was only an example. But next, what if I were to say, well, setTimeout, and let's do this. After two seconds, update the message property to "I have been changed." And yeah, think to yourself, will this work? Well we'd expect it to, but if we come back and give it a refresh, one, two, keep your eyes down here, nothing happens at all.

and really messy, and then when I want to share code across components, it gets even messier. And that's where the true flexibility of the composition API comes into play. Okay, so as it turns out, we actually have to do message.value. And again, you're thinking, oh, good grief, now it works. Okay, so as it turns out, when we create a ref that returns an object, it will make this string reactive, and then the value of the string is accessible through a property called value. So when you're using the composition API, and you have reactive data, you need to remember to always access that data by using message.value, excluding the template.

So when you're using the composition API, and you have reactive data, you need to remember to always access that data by using message.value, excluding the template. Notice in the template, I don't say message.value. Okay, so that is the absolute basics of the composition API. But now let's move on to the second part where we added script setup. So as it turns out, when we use this attribute setup, we're basically turning on a compiler macro that will make the code a little more friendly to write. And it's no coincidence that this and this method name are the same. All right, so check this out, and I'll show you a few benefits. First up, when we switch to script setup, you no longer have to import a component and

As you can imagine, when people first learned about this, they were a little critical. Many people said, you know what, this is annoying, I will constantly forget to tack on message.value to any of my reactive properties. And it's valid, I've forgotten many times myself. So they've toyed around with how to solve this, and one option is, again, through a macro. So just keep in mind, once again, this is, at the time of this recording, an experimental feature, which means we have to turn it on. Let's play around with it. Let's go to my vite.config.js file, and I will pass an object to the Vue plugin, where

Let's play around with it. Let's go to my vite.config.js file, and I will pass an object to the Vue plugin, where I will turn on reactivity transforms. Like this. Okay, so now we've enabled that experimental feature. So now what we can do is, I no longer have to import ref, I can instead use this magic variable, $ref. And when we use it like this, yeah, I no longer have to tack on .value. And that's because, once again, the compiler will take care of it for you. So it's a bit of a helper.

And if this isn't too overwhelming for you, I actually think all of this is incredibly cool. Because think about it. Now when I want to define my components, I will create a script tag, I add the setup attribute, and then I no longer have to register all of my components, I don't have to create a data method that returns an object. Instead, if I want to use a piece of data, then I just define it like a variable. And if I want that data to be reactive, then I wrap it in ref. Next, if I want to create a method, doSomething, then I just create a method, and then I can reference it in my template.

Next, if I want to create a method, do something, then I just create a method, and then I can reference it in my template. Like that. Now I have a function that I can call. So let's do, you know, super quickly, button, click me. When you click on it, call, do something. All right, refresh, click on it. Yeah, so all of these things ultimately end up being so much simpler. But yeah, you would be forgiven if your first thought is, nope, I'm good with the Options API, I'm going to stick with it.