Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,540 --> 00:00:06,210
Welcome to this section, we'll be learning about the biggest change to view the latest major version
2
00:00:06,210 --> 00:00:10,110
of you introduced an API called the Composition API.
3
00:00:10,470 --> 00:00:15,050
Throughout most of this course, I've avoided talking about the composition API.
4
00:00:15,390 --> 00:00:17,010
We haven't touched it once.
5
00:00:17,340 --> 00:00:20,190
The reason is because it has a larger learning curve.
6
00:00:20,430 --> 00:00:21,540
In my opinion.
7
00:00:21,540 --> 00:00:26,120
It's better to learn the basics of view before jumping into the composition API.
8
00:00:26,430 --> 00:00:30,800
At this point, you should be more than comfortable with writing a view application.
9
00:00:31,110 --> 00:00:35,380
It's time to learn what this API is and why you would want to use it.
10
00:00:36,030 --> 00:00:38,310
So what is the composition API?
11
00:00:38,610 --> 00:00:43,140
The composition API is an alternative syntax for writing components.
12
00:00:43,290 --> 00:00:44,790
It's purely additive.
13
00:00:45,000 --> 00:00:46,200
You don't have to use it.
14
00:00:46,500 --> 00:00:51,150
You can continue creating components with the syntax you're already familiar with.
15
00:00:51,540 --> 00:00:55,230
The syntax we've been using is called the Options API.
16
00:00:55,590 --> 00:01:01,470
As you saw, it's completely possible to build fully functioning apps with the Options API.
17
00:01:01,890 --> 00:01:07,500
The composition API was introduced for a couple of reasons which we'll get into in a moment.
18
00:01:08,190 --> 00:01:12,510
The composition API is not meant to replace the options API.
19
00:01:12,990 --> 00:01:16,680
You can continue to write components with the options API.
20
00:01:17,100 --> 00:01:20,490
If it were to be deprecated, I wouldn't have taught it to you.
21
00:01:20,820 --> 00:01:24,210
I don't want you to feel like you have to learn it if you wish.
22
00:01:24,480 --> 00:01:27,990
You can continue to use the options API without a problem.
23
00:01:28,530 --> 00:01:33,090
Here is a comparison between the options API and the composition API.
24
00:01:33,450 --> 00:01:36,840
Believe it or not, both examples do the exact same thing.
25
00:01:37,170 --> 00:01:40,770
They'll generate a component with a data property called Bar.
26
00:01:41,100 --> 00:01:44,280
They'll have a method called greeting that returns a string.
27
00:01:44,730 --> 00:01:48,650
Despite performing the same task, they're written completely differently.
28
00:01:49,320 --> 00:01:53,130
The question then becomes why should we learn the composition API?
29
00:01:53,460 --> 00:01:58,110
Before I answer, I want to dispel some myths about the composition API.
30
00:01:58,560 --> 00:02:02,220
You shouldn't learn it if you're hoping for a better performance or security.
31
00:02:02,610 --> 00:02:05,940
The composition API doesn't offer either of these.
32
00:02:06,210 --> 00:02:09,449
You'll get about the same loading times with either API.
33
00:02:09,780 --> 00:02:11,970
It wasn't introduced for these reasons.
34
00:02:12,480 --> 00:02:13,380
Under the hood.
35
00:02:13,500 --> 00:02:17,670
Both APIs use the same functions for performing the same task.
36
00:02:17,970 --> 00:02:22,110
The composition API isn't a replacement for the Options API.
37
00:02:22,410 --> 00:02:26,160
In fact, you can use both APIs in the same project.
38
00:02:26,670 --> 00:02:30,240
Let's get into why the composition API was introduced.
39
00:02:30,540 --> 00:02:34,050
The first reason is that it offers better typescript support.
40
00:02:34,350 --> 00:02:38,100
Previous versions of you have had typescript support.
41
00:02:38,340 --> 00:02:41,490
Unfortunately, the implementation wasn't ideal.
42
00:02:41,760 --> 00:02:45,570
There were a lot of issues with it, mainly because of the options API.
43
00:02:45,720 --> 00:02:49,830
It didn't allow for some of the design patterns you can create with TypeScript.
44
00:02:50,130 --> 00:02:53,880
The composition API offers better support for type scripts.
45
00:02:54,480 --> 00:02:58,500
You want to use the composition API if you're going to use type scripts.
46
00:02:58,770 --> 00:03:01,950
If you're not familiar with type scripts, that's perfectly fine.
47
00:03:02,280 --> 00:03:05,730
The composition API can be written in plain JavaScript.
48
00:03:06,180 --> 00:03:11,400
It isn't necessary to install TypeScript for writing components with the composition API.
49
00:03:12,060 --> 00:03:14,550
The second reason is for a better organization.
50
00:03:14,880 --> 00:03:19,290
The Options API works well for small to medium sized components.
51
00:03:19,530 --> 00:03:24,030
Sometimes you'll create large components where organization may become an issue.
52
00:03:24,270 --> 00:03:26,670
A component may have multiple features.
53
00:03:27,240 --> 00:03:30,180
Here's an example of a component with two features.
54
00:03:30,420 --> 00:03:35,790
We have a property called user and the method for retrieving the user called Get User.
55
00:03:36,180 --> 00:03:41,670
There's another property called carped and a method for retrieving a product called Get Product.
56
00:03:42,210 --> 00:03:47,040
It's easy to see that the user property and get user method work hand in hand.
57
00:03:47,370 --> 00:03:51,030
The same can be said for the property and get product method.
58
00:03:51,390 --> 00:03:54,870
As you can see visually, the logic is separated.
59
00:03:55,050 --> 00:03:57,540
It doesn't seem like a big issue, but it is.
60
00:03:57,540 --> 00:04:02,520
When you're working on larger components, you will have to constantly scroll up and down to work on
61
00:04:02,520 --> 00:04:03,450
a single feature.
62
00:04:04,050 --> 00:04:07,740
Here's the same example, but written with the composition API.
63
00:04:08,040 --> 00:04:12,540
By using the composition API, you can organize code more freely.
64
00:04:12,780 --> 00:04:16,320
You're not bound to defining logic in specific objects.
65
00:04:16,589 --> 00:04:19,529
There's more liberty as to where you can define things.
66
00:04:19,980 --> 00:04:21,450
I'll bring back the visual.
67
00:04:21,660 --> 00:04:28,500
If we compare the to the composition API allows for a better organization, it helps keep you focused
68
00:04:28,500 --> 00:04:30,060
on the feature you're working on.
69
00:04:32,620 --> 00:04:39,220
Here's a more extreme example, this example was taken from the composition API documentation to the
70
00:04:39,220 --> 00:04:42,960
left, we have the component written with the Options API.
71
00:04:43,330 --> 00:04:45,010
It's highly disorganized.
72
00:04:45,190 --> 00:04:47,920
To the right, we have the composition API.
73
00:04:48,160 --> 00:04:50,200
It's much more cleaner and organized.
74
00:04:50,650 --> 00:04:56,380
This freedom is one reason why you would want to use the composition API over the options API.
75
00:04:56,980 --> 00:05:00,190
The last reason is that it offers better reusability.
76
00:05:00,460 --> 00:05:04,200
This is probably the biggest reason to use the composition API.
77
00:05:04,540 --> 00:05:09,990
Chances are you'll want to reuse some of the logic you've written in previous versions of View.
78
00:05:10,210 --> 00:05:14,030
The only way you can reuse code was by using a feature called Mix.
79
00:05:14,030 --> 00:05:18,730
Since Nixon's weren't that great, they didn't have great Intellisense support.
80
00:05:19,000 --> 00:05:23,950
This meant you had to go back and forth between files to understand what was exposed to you.
81
00:05:24,310 --> 00:05:28,550
There were also problems with conflicting names between mixes and components.
82
00:05:28,840 --> 00:05:34,540
Lastly, there weren't better alternatives to mix since we'll be learning about mix ins in the next
83
00:05:34,540 --> 00:05:35,040
lecture.
84
00:05:35,230 --> 00:05:37,630
Don't worry if you're not familiar with Nixon's.
85
00:05:38,050 --> 00:05:44,020
The composition API fixes these issues, you'll better understand why this is important in the next
86
00:05:44,020 --> 00:05:44,560
lecture.
87
00:05:45,130 --> 00:05:48,880
That about sums up why you'd want to use the composition API.
88
00:05:49,150 --> 00:05:54,880
It has typescript support easier to organize code and better usability patterns.
89
00:05:55,150 --> 00:05:59,260
In the next couple of lectures, we'll learn about the composition API.
8908
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Akan
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bemba
Bengali
Bihari
Bosnian
Breton
Bulgarian
Cambodian
Catalan
Cebuano
Cherokee
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Faroese
Finnish
Galician
Georgian
German
Greek
Guarani
Haitian Creole
Hausa
Hawaiian
Hebrew
Hmong
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Kinyarwanda
Kirundi
Kongo
Korean
Krio (Sierra Leone)
Kurdish
Kyrgyz
Laothian
Latin
Latvian
Lithuanian
Luganda
Luo
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mauritian Creole
Moldavian
Mongolian
Myanmar (Burmese)
Montenegrin
Nepali
Norwegian
Pashto
Persian
Polish
Portuguese (Brazil)
Portuguese (Portugal)
Quechua
Romanian
Romansh
Russian
Samoan
Scots Gaelic
Serbian
Sesotho
Setswana
Seychellois Creole
Shona
Sindhi
Sinhalese
Slovak
Slovenian
Somali
Spanish
Swedish
Tajik
Thai
Tigrinya
Tonga
Turkish
Turkmen
Ukrainian
Uzbek
Vietnamese
Welsh
Wolof