All language subtitles for 002 Mixins_en

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French Download
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.