Composition API

[00:00:00]
>> So we're here to talk about the brand new feature that I'm sure you all have heard about with view, which is the composition API. After all, v3 is now here ready for use in production. But before anyone panics, in case you didn't know, the composition API is not a view three only feature.

[00:00:18]
If you have a view to app, you can leverage this still, because there's actually an official plugin for view two that allows you to leverage the composition API. So if you're like, gosh, I'm not using view three anytime soon because you're not ready to migrate, that's totally fine.

[00:00:31]
We're gonna talk about here today will actually apply to your application Still, if you should you choose to use the plugin When it comes to the composition API. The key problem we wanted to solve with a sort of shared functionality is there needed to be a way to easily bring in basically different pieces of features.

[00:00:49]
That we wanted to share without the cons of, say mix ins and provide inject that we just talked about. And so the best way for us to share sort of how the composition API works is to go ahead and just do like basically like a bit of live coding.

[00:01:05]
So here I'm gonna go ahead and let's, let's wipe this stuff out, and then see I'm gonna go ahead and make these two thirds make this one third. And then let's make sure we have our app up and running, so here we go, it was already running on, port 80, great, all right.

[00:01:39]
All right, so, let's wipe that out, and then let's jump into the Hello World component, and let's talk composition API, I'm gonna wipe out a lot of The boilerplate here. So we can talk through the competition API. Okay, so here we go, all right, so this terminology is basically going to become pretty ubiquitous within the ecosystem.

[00:02:12]
So I think it's important to sort of define this early on. So When it comes to now the composition API, there are 2, basically 2 paradigms when it comes to looking at how view components are written. There is the object API, which is what we all have known and used basically going forward, and then there's gonna be the competition API.

[00:02:31]
And so let's go ahead and so for example, If we were to define like a reactive data component here, let's call it current count, for example, this is how we would do it inside of the options API. Right, we're familiar with this usage as far as updating this and saying, Hey, current count should be this.

[00:02:53]
So I should let me go in and make it at each one, so it's easy to see. Great, okay, now, this is great, but what if we wanted to be able to share for example, this data, right? We talked about mixings, and those sort of things, and so We'll take the first step in migrating our current count into the composition API, so that we can see that and then abstract it one level further.

[00:03:21]
So here actually what I wanna do just to make this abundantly clear, or actually I'll do that in a second. Okay, so the key, word to knowing whenever a component is using the composition API is the setup function. So think of it a little bit like a lifecycle hook were similar to like mounted and mounted, those sort of things.

[00:03:41]
This occurs early on when the component is being basically generated, at this point you have access to things like props and the attributes, but you still lacking context into the data. So right now for example, inside of setup at this point in the lifecycle, I cannot access what's inside of this database like the auctions API has not like fully gotten set up.

[00:04:05]
And so if we were to create the equivalent, right, and let's call it current count two, and just to make it infinitely clear, it's different, let's call it 12. What we have here, if you can see that this looks a little bit different, this looks like normal JavaScript.

[00:04:23]
And that it is because at the point you enter the composition API, you have now entered the land where you need to hook up everything yourself. A lot of the conveniences that view affords you with a debt of options API are basically gone now. And, so in this case, for example, not only do we need to declare the variable here, we actually need to expose it just like you would in data.

[00:04:43]
So if I expose current count here, current count two, and then we go ahead and render it here as an h2, so, like this. We'll see now that actually I can do that, we see now that it is actually 12. And so this might not seem too bad actually at first because this is starting this mental models fairly close.

[00:05:10]
But one of the things that comes to mind is that if we were to try to update currentCount in this case, so you might have say a method that says incrementCount. So this case right, we would say this.currentCount ++, this is how you would normally write it. And so if we had on our button, basically incrementCount We'll see that when we click, it works as expected.

[00:05:35]
But then you're like, okay, well what if I want to like, increment like current count too, and so you might be increment. You might be tempted to do this, but you see that nothing's happening. And the reason for that is because one of the things I think we get, sort of comfortable with view is that it automatically makes most of the things we want to be automatically reactive.

[00:05:55]
And in this case it's not. And so what we need to do is actually import our, similar to like outside my helper methods earlier with the hyper script, we're gonna need help or methods to make this thing reactive. Luckily, the helper method is called reactive, and so when we have a reactive property here, this allows us to create a reactive object that we can then unwrap.

[00:06:19]
And so in this case, I'm going to go ahead and do a console state where current count is 12, and then we're going to return state, okay? And then ;all right, I've got this needs to be reactive, okay? And so now you're thinking, okay, this is great, now if I try to increment like, does it do anything, nothing's happening, why is that?

[00:06:51]
And at this point like this is where it's a little bit complicated when it comes to mixing the options API with the composition API, because at this point, we've exposed data. But what we really want is to actually move the method into the composition API, which will then allow it to update.

[00:07:06]
So in this case, right, let's just call it cons increment, count two, and so in the options API, we had to define everything within methods, right? But we know that methods at the end day are just functions, and so in this case, we would say, in this case, we say state.currentcount2 is incremented.

[00:07:27]
And then we can expose this as the object Here, and then if we wire this up, let's see, so one okay, actually here this is this good, so a couple of things now, right? One, our current count doesn't show up anymore, and the reason for that is because we're referring to current count to.

[00:07:50]
But really we haven't exposed that well we have exposed his state. And so theoretically we not even theoretically, what we need to do is then expose that using the state actually referring to State DOT. And so now that we have here, if I go ahead and switch this to increment count two, you'll see now that everything is working as expected.

[00:08:10]
And so this is a little tricky, right, because you're probably thinking like, wow, this is like, okay, like, but what if like, I don't like state, right? Because one of the nice things that the datastore afforded us was the ability to then say that, hey, I just like whatever I define, just expose that to the template.

[00:08:29]
Otherwise, I'm gonna have State DOT stuff written all over the place, well, in this case, we have to introduce you to the conference concept of refs. And so refs in this case, in the composition API, then allow you to define reactive properties that are basically reactive at the core level.

[00:08:49]
So again, if we do const's current count three Is equal to ref in this case, let's start it at eight. And then I expose that here at current count three, and then I need to return comma and then yes ref is not defined. Whoop a And then once more we will copy this, and current count three is current count three.

[00:09:18]
Not state just here, do there we go, you see that we see our eight here and our 12 here, and then the difference here being that if you wanted to increment it right with ref. There's a whole concept regarding reactivity engine and then the proxy which you can learn about on the docks, unfortunately, there's not enough time to go over that.

[00:09:37]
But the key thing here with the competition with sort of the raft property is that you need to basically un-package it, so if we were to keep this, let's switch this out to, increment count three. You might think that this is a simple, for example, saying current count three plus plus.

[00:09:56]
And so if I swap this out here, we'll see now that one there is an error because one you're trying to mutate again following normal JavaScript rules. This is the content, you can't mutate a constant like this, and so again, this feels a little odd because again, in view, this would have normally been this current count three plus, plus.

[00:10:16]
Because again if you handle those things view in the object API handles those things for you, and so luckily we can see here that it's actually giving us some basically a pointer as far as what to do the CLI. Which is the fact that we actually have to unpack it, and so you can see here that if we do dot value now all the errors go away, and now when we increment.

[00:10:36]
It updates accordingly, and so the reason this is important is because when you're looking at states and you're like I wanna be able to like spread it out, right. You might be tempted to go like, well,it's java script so I'll just spread it out and then as you see though, everything breaks.

[00:10:53]
And the reason for that is because when you spread out an object in JavaScript it actually breaks all of the proxying. Cuz right now like when you're in here on line 27 reactive is like watching an object and when you spread it out you basically breaking apart the object.

[00:11:08]
And so you have to do one step further which is to then say hey on top of like spreading it out, we need to convert everything to refs. So that's why this method, this helper method is important for this, so that you can then say, okay, I'm gonna take, my reactive object, and I'm going to destructure it and put it into our state.

[00:11:32]
And what this does then is allows me to, let's see, save, refresh, and then to check that this works, we're gonna go ahead and then increment count two. Count two is not defined, that it wait I, there we go, current count of state still need this. So now I no longer need this and to make sure it works, you can see everything works exactly as expected.

[00:12:01]
And so one of the first discussion points that often comes up when people are learning the composition API, is that first of all, like Which one should I use? Should I use reactive or should I use rest As we saw reactive is actually probably the closest thing we have mental model wise to the options API and so in that regard as we can see.

[00:12:19]
Because even though it's not as simple as calling necessarily this dot current count to for example, it does like avoid the caveat that often come with refs and having to unpack. The values, and basically having a lot of different things that you're tracking over time. And so again, from a mental model perspective, I recommend starting with reactive first.

[00:12:38]
And then if you really need to, then you can certainly use refs. But I think reactive is probably the best thing to start with, when you're building with the composition API. And just remember that if you want to spread out what's inside of your data objects so that it reacts.

[00:12:52]
Sorry, inside of your reactive object, and you want to behave a little bit more like the data options API, than just make sure to remember this 2 refs method here.