Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,950 --> 00:00:03,680
In this lecture, we're going to learn about mixing.
2
00:00:03,680 --> 00:00:07,280
Is there a way to re-use logic within components?
3
00:00:07,280 --> 00:00:11,030
Reusability can make your code more readable and manageable.
4
00:00:11,060 --> 00:00:15,410
Vue offers a solution called mixes to help you with reusability.
5
00:00:15,410 --> 00:00:22,070
Let's explore how to use mix ins in the resource section of this lecture, I provide a link to the mix
6
00:00:22,070 --> 00:00:23,870
ins documentation page.
7
00:00:23,870 --> 00:00:25,880
Here is what Vue says about them.
8
00:00:26,090 --> 00:00:31,730
Mix ins are a flexible way to distribute reusable functionalities for Vue components.
9
00:00:31,760 --> 00:00:38,630
A mix an object can contain any components options when a component uses a mix in all options in the
10
00:00:38,630 --> 00:00:42,140
mix and will be mixed into the components own options.
11
00:00:42,350 --> 00:00:48,050
If you have properties similar to one another from component to component, you can use a mix and to
12
00:00:48,050 --> 00:00:50,810
prevent yourself from rewriting the same code.
13
00:00:50,810 --> 00:00:55,100
It's common to have functions that you want to share amongst many components.
14
00:00:55,100 --> 00:00:57,920
Mix ins are the perfect solution for this.
15
00:00:58,160 --> 00:01:04,250
For this example, we're going to create a mix and that will keep track of the pages scroll offset.
16
00:01:04,250 --> 00:01:06,320
We'll add the mix into a component.
17
00:01:08,280 --> 00:01:13,970
In the resource section of this lecture, I provide a zip file with the starter files you'll need.
18
00:01:14,010 --> 00:01:17,290
Upload it anywhere you'd like after uploading it.
19
00:01:17,310 --> 00:01:20,080
Run the NPM install commands.
20
00:01:20,100 --> 00:01:23,490
Lastly, start the server with the dev command.
21
00:01:25,830 --> 00:01:28,550
There's nothing much to say about the starter files.
22
00:01:28,560 --> 00:01:33,810
Pretty much all of them are the starter files you'll receive if you select the default preset.
23
00:01:33,840 --> 00:01:36,810
I've made changes to the app component file.
24
00:01:36,840 --> 00:01:38,340
Open it in your editor.
25
00:01:40,770 --> 00:01:45,850
In the template, we have two elements called app and scroll position.
26
00:01:45,870 --> 00:01:48,700
The app element acts as a container.
27
00:01:48,720 --> 00:01:53,730
If we scroll down to the CSS, we'll see that it has relative positioning.
28
00:01:55,950 --> 00:01:58,810
We're giving it an abnormally large height.
29
00:01:58,830 --> 00:02:04,260
We're using a large height because we want to be able to scroll up and down the page to view the results.
30
00:02:04,290 --> 00:02:08,050
The scroll position element has a fixed position.
31
00:02:08,070 --> 00:02:10,870
We want to be able to see it whenever we scroll.
32
00:02:10,889 --> 00:02:15,990
We want to see it because it'll contain an expression that will output the scroll offset.
33
00:02:16,020 --> 00:02:18,060
You'll see what it looks like in a moment.
34
00:02:18,390 --> 00:02:21,640
First, we need to create these scroll properties.
35
00:02:21,660 --> 00:02:25,840
We'll be creating it in a mixing in the source directory.
36
00:02:25,860 --> 00:02:29,370
Create a file called MCS in JS.
37
00:02:31,580 --> 00:02:34,460
Inside the file, we'll export an object.
38
00:02:36,630 --> 00:02:38,340
Nixons don't work on their own.
39
00:02:38,340 --> 00:02:39,520
They're not meant to.
40
00:02:39,570 --> 00:02:43,950
They are objects that will merge with an instance of view or a component.
41
00:02:43,980 --> 00:02:50,080
The options we create in a mix and must match the option names in a component's options object.
42
00:02:50,100 --> 00:02:56,010
If we want to create data, then we'll need to create a data function, so on and so forth.
43
00:02:56,190 --> 00:03:00,390
We're going to create a data property for storing the scroll offset.
44
00:03:00,420 --> 00:03:03,570
Define the data function inside the mix in.
45
00:03:05,930 --> 00:03:10,400
At a property called Offset set its initial value to zero.
46
00:03:13,530 --> 00:03:18,990
The offset will be zero because that's the initial value the browser will assign the offset to.
47
00:03:19,020 --> 00:03:23,710
We want to be able to update the offset whenever the user scrolls on the page.
48
00:03:23,730 --> 00:03:28,440
The browser emits an event we can listen to for when this occurs.
49
00:03:28,740 --> 00:03:32,220
We'll start listening for the event when the component is mounted.
50
00:03:32,250 --> 00:03:35,400
Define the mounted lifecycle function.
51
00:03:37,770 --> 00:03:39,030
Inside the function.
52
00:03:39,030 --> 00:03:44,340
We'll listen to the event by calling the Windows Add event listener function.
53
00:03:46,750 --> 00:03:49,080
The name of the event is called Scroll.
54
00:03:49,090 --> 00:03:53,680
If the event is emitted, we'll call the this dot update function.
55
00:03:56,030 --> 00:03:57,770
This function isn't defined.
56
00:03:57,770 --> 00:03:58,670
Let's define it.
57
00:03:58,670 --> 00:04:01,970
Next, add the methods object to the mix in.
58
00:04:04,520 --> 00:04:06,410
Define the update function.
59
00:04:08,800 --> 00:04:15,460
Lastly, we'll set the offset data property to the window page Y offset property.
60
00:04:17,790 --> 00:04:23,310
We have a mix and if we're keeping track of the offset of the page, will want to merge this mix in
61
00:04:23,310 --> 00:04:24,780
with the app component.
62
00:04:25,110 --> 00:04:27,560
This can be done by registering a mix in.
63
00:04:27,570 --> 00:04:30,990
We can register a mix in locally or globally.
64
00:04:31,020 --> 00:04:37,620
Let's start with a local mix in back in the app component file, we'll import the mix and file.
65
00:04:44,450 --> 00:04:45,680
To register the object.
66
00:04:45,680 --> 00:04:51,260
As a mixon, we need to add the Nixons property to the components configuration object.
67
00:04:53,590 --> 00:04:56,980
The Nixon's property needs to be set to an array.
68
00:04:57,010 --> 00:05:01,200
The arrays should be the objects that you would like merged with the component.
69
00:05:01,210 --> 00:05:05,410
In our case, we want to merge the scroll mix in object.
70
00:05:05,410 --> 00:05:06,760
We'll pass that in.
71
00:05:09,180 --> 00:05:14,050
The properties and methods from the MCS and will be accessible via the this keyword.
72
00:05:14,070 --> 00:05:16,470
We can treat them as if they were the components.
73
00:05:16,500 --> 00:05:20,790
Options to begin with, we'll want to display the offset in the template.
74
00:05:20,820 --> 00:05:24,450
We have a div tag with the class scroll position.
75
00:05:24,450 --> 00:05:25,320
It's empty.
76
00:05:25,350 --> 00:05:27,340
Let's add an expression inside it.
77
00:05:27,360 --> 00:05:30,360
The expression will be set to offset.
78
00:05:32,630 --> 00:05:35,360
Let's check out the application in the browser.
79
00:05:37,850 --> 00:05:42,410
If I scroll up and down, the expression will be updated with the scroll offset.
80
00:05:42,860 --> 00:05:49,220
Even though the code wasn't written in the component view merged the Nixon with the components options.
81
00:05:49,250 --> 00:05:54,720
Nixon's allow us to re-use code by outsourcing the logic into a separate object.
82
00:05:54,740 --> 00:05:57,380
We can nab this mix into any component.
83
00:05:57,800 --> 00:06:01,300
There are a couple of things to be aware of when using Nixon's.
84
00:06:01,310 --> 00:06:06,260
Firstly, an instance or components options will always have priority.
85
00:06:06,290 --> 00:06:09,620
Let's look at an example by switching back to the editor.
86
00:06:11,880 --> 00:06:15,810
Let's create a data function in the app component file.
87
00:06:18,050 --> 00:06:21,680
Inside the object, we'll add a property called Offset.
88
00:06:21,710 --> 00:06:23,510
Its value will be zero.
89
00:06:25,640 --> 00:06:31,780
The mix already has an offset data property view will use the property in the component.
90
00:06:31,790 --> 00:06:36,080
The Nixon's version of the property will not be merged with the component.
91
00:06:36,110 --> 00:06:40,280
This doesn't mean the other methods we have in the mix and will not get included.
92
00:06:40,310 --> 00:06:46,310
The update method will get merged with the component because the component doesn't have it defines.
93
00:06:46,700 --> 00:06:50,810
Another thing worth noting is that components don't share mixing data.
94
00:06:50,810 --> 00:06:57,110
For instance, if I were to register the mixing with another component, it won't share the offset data
95
00:06:57,110 --> 00:06:59,300
property with the app component.
96
00:06:59,330 --> 00:07:03,920
They'll be treated as independent properties in their respective components.
97
00:07:03,920 --> 00:07:08,300
We don't have to worry about things leaking from one component to the next.
98
00:07:08,600 --> 00:07:14,210
One component does not influence any other components data, even if they're registering the same mix
99
00:07:14,210 --> 00:07:15,230
in the mix.
100
00:07:15,230 --> 00:07:20,450
Since properties are duplicated, all components will have a unique version of the data.
101
00:07:20,870 --> 00:07:24,800
One last thing worth noting is how lifecycle functions are treated.
102
00:07:24,800 --> 00:07:30,350
If a mixing and component have the same lifecycle function defined, they'll both run.
103
00:07:30,350 --> 00:07:34,400
Let's look at an example inside the app component file.
104
00:07:34,400 --> 00:07:37,430
We're going to add the mounted lifecycle function.
105
00:07:39,600 --> 00:07:44,580
We'll log the message that says the following app Mounted Life Cycle Function.
106
00:07:46,770 --> 00:07:53,040
The Nixon is already defining the mounted life cycle function when it comes to life cycle functions.
107
00:07:53,040 --> 00:07:59,040
Vue will push both methods into an array where both functions are called Let's do the browser to see
108
00:07:59,040 --> 00:07:59,970
what happens.
109
00:08:02,420 --> 00:08:07,040
If I scroll up and down the page, the offset will continue to get updated.
110
00:08:07,070 --> 00:08:11,310
This can only happen if the mounted function from the mixing was called.
111
00:08:11,330 --> 00:08:14,750
Let's open the console to see if the message is logged.
112
00:08:16,970 --> 00:08:21,230
We'll find that the components mounted life cycle function was called.
113
00:08:21,230 --> 00:08:27,440
If a component defines a life cycle function, it'll get called along with the Nixons life cycle function.
114
00:08:27,470 --> 00:08:33,799
This gives us the opportunity to define life cycle functions without them conflicting with another freely.
115
00:08:34,130 --> 00:08:40,330
Nixon's can be useful for generating generic functions that can be shared across multiple components,
116
00:08:40,340 --> 00:08:41,820
while Nixon's are great.
117
00:08:41,840 --> 00:08:43,750
There are a few issues with them.
118
00:08:43,760 --> 00:08:49,880
Let's discuss what those issues are to discover why the development team behind Vue decided to create
119
00:08:49,880 --> 00:08:51,560
the composition API.
120
00:08:51,890 --> 00:08:56,110
The biggest problem with the Nixon API is name space clashing.
121
00:08:56,120 --> 00:09:02,900
We have an example in our project, the offset data property in the component clashes with the Nixon.
122
00:09:02,930 --> 00:09:06,620
We don't get an error from view or the editor about the problem.
123
00:09:06,960 --> 00:09:08,480
We will make an assumption.
124
00:09:08,480 --> 00:09:12,410
It'll assume the data property in the component should be used.
125
00:09:12,590 --> 00:09:15,500
But what if we wanted to use the offset in the mix?
126
00:09:15,740 --> 00:09:19,390
Well, that's not possible unless we change the names.
127
00:09:19,400 --> 00:09:24,950
If we want to prevent clashing from happening, we'll have to look inside the Nixon file to discover
128
00:09:24,950 --> 00:09:26,780
what property names are taken.
129
00:09:26,810 --> 00:09:29,920
The Nixon doesn't directly tell us what gets added.
130
00:09:29,930 --> 00:09:34,850
We have to peek inside the Nixon file to discover what gets added to the component.
131
00:09:35,270 --> 00:09:40,220
This problem can be amplified if you have multiple Nixon's register to a component.
132
00:09:40,250 --> 00:09:45,920
Not only will you have to check if a component has any clashing names, but you'll also need to check
133
00:09:45,920 --> 00:09:46,460
with the other.
134
00:09:46,460 --> 00:09:50,720
Nixon's view will not tell you if there are namespace collisions.
135
00:09:50,750 --> 00:09:53,660
Nixon's can easily override one another.
136
00:09:53,870 --> 00:09:56,870
It's for this reason that Nixon's are problematic.
137
00:09:56,900 --> 00:10:02,810
It's challenging to develop a system that will tell you when you have name space clashing with Nixon's.
138
00:10:02,840 --> 00:10:08,150
You can avoid this issue by opening the files and checking the names manually, but it's something that
139
00:10:08,150 --> 00:10:10,730
can be easily overlooked during development.
140
00:10:11,060 --> 00:10:14,810
The composition API is much better at handling this issue.
141
00:10:14,840 --> 00:10:18,320
With that said, let's learn about the composition API.
142
00:10:18,350 --> 00:10:22,460
We'll look at how this issue is resolved in the next set of lectures.
14255
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.