Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,150 --> 00:00:06,630
In this lecture, we're going to finish our discussion of the Composition API by looking at a syntactic
2
00:00:06,630 --> 00:00:09,690
feature by compiling our project with vite.
3
00:00:09,720 --> 00:00:14,880
We have access to a special attribute to simplify the composition API.
4
00:00:14,910 --> 00:00:17,490
Let's open the app component file.
5
00:00:19,730 --> 00:00:20,600
On the script.
6
00:00:20,600 --> 00:00:23,330
BLOCK Add an attribute called setup.
7
00:00:25,370 --> 00:00:31,720
By adding this attribute code written inside the script block will be wrapped by the setup function.
8
00:00:31,730 --> 00:00:37,490
That means we don't have to export an object, nor do we need to add the setup function.
9
00:00:37,490 --> 00:00:40,400
We can safely remove the export statement.
10
00:00:40,430 --> 00:00:43,490
Do not remove the inner contents of the object.
11
00:00:45,610 --> 00:00:49,810
Next, remove the name components and setup properties.
12
00:00:49,810 --> 00:00:53,950
However, do not remove the inner contents of the setup function.
13
00:00:56,080 --> 00:00:59,380
You may need to format your code after doing so.
14
00:00:59,380 --> 00:01:01,540
Remove the return statements.
15
00:01:03,640 --> 00:01:04,420
Voila.
16
00:01:04,450 --> 00:01:05,379
We're finished.
17
00:01:05,410 --> 00:01:07,760
We do not need to return values.
18
00:01:07,780 --> 00:01:13,190
View will automatically export the variables and functions defined from the block.
19
00:01:13,210 --> 00:01:16,660
Our template will continue to have access to everything.
20
00:01:16,660 --> 00:01:19,550
What about the components and import statements?
21
00:01:19,570 --> 00:01:25,080
If we import a component, it will automatically be registered with the current components.
22
00:01:25,090 --> 00:01:30,660
For example, the app alert component will remain functional from within the templates.
23
00:01:30,670 --> 00:01:35,680
As for the import statements, they'll be moved outside of the setup function.
24
00:01:35,680 --> 00:01:39,250
Behind the scenes view handles the complexities.
25
00:01:39,430 --> 00:01:43,360
This feature simplifies the composition API further.
26
00:01:43,360 --> 00:01:46,600
However, there is one problem in the template.
27
00:01:46,630 --> 00:01:49,570
We're using an expression to output the name.
28
00:01:49,570 --> 00:01:53,830
However, this property does not exist in the script block.
29
00:01:53,860 --> 00:01:57,010
It does exist with the user object.
30
00:01:59,130 --> 00:02:05,800
In an earlier lecture, we converted the reactive object into separate refs to fix this issue.
31
00:02:05,820 --> 00:02:13,230
We must explicitly define a variable at the bottom of the block called the two refs function with the
32
00:02:13,230 --> 00:02:14,700
user object.
33
00:02:16,950 --> 00:02:20,670
The structure of the return value for the name property.
34
00:02:22,800 --> 00:02:27,530
By explicitly defining the variable, it will be returned by the function.
35
00:02:27,540 --> 00:02:31,710
The name property will be accessible from within the templates.
36
00:02:31,740 --> 00:02:35,490
Let's try testing our code by refreshing the page.
37
00:02:37,720 --> 00:02:38,410
Great.
38
00:02:38,440 --> 00:02:40,750
Our component is entirely functional.
39
00:02:40,750 --> 00:02:43,560
We can perform the same actions as before.
40
00:02:43,570 --> 00:02:47,770
For example, we can type in the input or press the buttons.
41
00:02:47,770 --> 00:02:49,000
Everything works.
42
00:02:49,030 --> 00:02:52,390
That wraps up our discussion of the composition API.
43
00:02:52,420 --> 00:02:53,840
I hope you enjoyed it.
44
00:02:53,860 --> 00:02:57,880
In the next section, let's explore some more features of you.
3997
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.