Launching with Composition API with Ben Hong

What is Composition API?

In this stage, we will learn what the Composition API is.

πŸ“ Transcript

00:00:02.880 --> 00:00:06.680 So the first question is what is the composition API?

00:00:06.830 --> 00:00:10.280 In Vue 2, one of the challenges that developers face as apps grew

00:00:10.280 --> 00:00:13.670 in scale was the desire to share and reuse code in a way that was

00:00:13.670 --> 00:00:15.470 more flexible than the options API.

00:00:16.190 --> 00:00:19.340 And while there are techniques like mixins provide inject and such

00:00:19.370 --> 00:00:22.640 to help with this, it came with drawbacks that were less than ideal.

00:00:23.925 --> 00:00:28.245 But at the end of the day, at its core, the composition API is another way to

00:00:28.245 --> 00:00:30.285 build vue apps and organize your code.

00:00:32.025 --> 00:00:34.575 But before we can talk more about it, let's do a quick review

00:00:34.605 --> 00:00:36.405 of what the options API is.

00:00:37.605 --> 00:00:40.545 Here, we have the counter app, which should be familiar to most of us,

00:00:40.545 --> 00:00:42.015 who've been writing Vue for some time.

00:00:43.185 --> 00:00:46.425 And in case you didn't know, it's written in what is called the options API.

00:00:47.265 --> 00:00:50.205 The reason it's called the options API is because it provides

00:00:50.235 --> 00:00:51.915 predefined options for us to use.

00:00:52.410 --> 00:00:55.740 So we have things like our data, property, computed, property, and methods

00:00:55.950 --> 00:00:57.810 to contain the individual sections.

00:00:58.170 --> 00:01:00.900 If we were to rewrite this using the new competition API,

00:01:01.070 --> 00:01:02.090 here's what it would look like.

00:01:03.620 --> 00:01:06.869 As you can see, it looks like there's a lot more going on, but don't worry

00:01:06.960 --> 00:01:10.190 by the end of this mission, you know exactly how all of this works.

00:01:12.020 --> 00:01:14.930 Now, before we move on, there's one thing I need you to understand,

00:01:15.289 --> 00:01:19.250 and that is the composition API does not replace the options API.

00:01:20.805 --> 00:01:23.715 And while there are a lot of benefits to the composition API, there are some

00:01:23.715 --> 00:01:25.365 trade-offs that I want you to understand.

00:01:26.085 --> 00:01:29.235 As we saw in the example before, the competition API can be more

00:01:29.235 --> 00:01:32.715 verbose and has less structure in comparison with the options API.

00:01:33.105 --> 00:01:35.775 It also requires more JavaScript knowledge in order to use it.

00:01:35.985 --> 00:01:39.135 In addition, you also need a deeper understanding of how

00:01:39.135 --> 00:01:40.695 Vue works in order to use it.

00:01:41.265 --> 00:01:44.835 And since there is less structure, this means that architectural decisions are up

00:01:44.835 --> 00:01:46.695 to you, which can be a double-edged sword.

00:01:47.025 --> 00:01:48.135 So let's see it in action.

00:01:49.155 --> 00:01:51.794 Here we have a simple component using the composition API.

00:01:52.664 --> 00:01:55.455 The biggest indicator to let you know that the composition API is

00:01:55.455 --> 00:01:57.315 being used is the setup keyword.

00:02:00.420 --> 00:02:05.490 Set up has two optional arguments that it is passed, which are props and context.

00:02:06.570 --> 00:02:07.619 In some codebases.

00:02:07.770 --> 00:02:11.960 You'll also see contexts abbreviated to CTX and inside of the context

00:02:11.980 --> 00:02:16.500 argument, you get access to three properties: attributes, slots, and emit.

00:02:16.950 --> 00:02:19.140 So just know that this is here for you when you need it.

00:02:20.369 --> 00:02:21.989 So setup has two major parts.

00:02:22.320 --> 00:02:24.929 The first part is going to contain all of the standard JavaScript that

00:02:24.929 --> 00:02:26.429 you would write to set up your code.

00:02:26.880 --> 00:02:29.459 So in this case, all we're doing is declaring a constant

00:02:29.459 --> 00:02:31.170 of count with a value of zero.

00:02:31.560 --> 00:02:34.380 The second part is the code that you want to expose to the component,

00:02:34.560 --> 00:02:38.370 which is accomplished by returning an object with the relevant properties.

00:02:39.540 --> 00:02:42.179 However, the problem with the code we have here is that while

00:02:42.179 --> 00:02:43.709 it works, the data is static.

00:02:44.130 --> 00:02:47.700 In other words, it is not reactive and none of the dependencies will update.

00:02:47.730 --> 00:02:48.600 If we try to change it.

00:02:49.275 --> 00:02:51.615 With that said, let's start diving into some code.

00:02:52.125 --> 00:02:53.145 See you in the next video.

Explorers

your progress

39