WEBVTT 1 00:00:00.080 --> 00:00:03.359 Welcome to the deep dive. Today, we're tackling modern web 2 00:00:03.359 --> 00:00:07.960 development by zeroing in on Maya Chavin's Learning View. 3 00:00:08.119 --> 00:00:09.439 Right. It's a great resource. 4 00:00:09.519 --> 00:00:13.679 We've sifted through a lot here preface chapters one, three, thirteen, 5 00:00:13.800 --> 00:00:16.359 basically the whole thing pretty much, and our goal is 6 00:00:16.399 --> 00:00:19.559 to pull out the essential insights, help you grasp why 7 00:00:19.640 --> 00:00:22.640 VJs is, you know, such a major player. 8 00:00:22.359 --> 00:00:24.559 Today, Yeah, and get a solid handle on its core 9 00:00:24.600 --> 00:00:26.039 principles exactly. 10 00:00:26.440 --> 00:00:29.079 So, if you're looking to quickly understand a leading front 11 00:00:29.160 --> 00:00:32.439 end framework, especially View, well, this is your shortcut. 12 00:00:32.520 --> 00:00:36.359 Think of it as a focused tour through the heart 13 00:00:36.399 --> 00:00:38.880 of VIEWJS, using Shavin's book as our guide. 14 00:00:38.880 --> 00:00:40.719 We'll cover everything from setting things up. 15 00:00:40.600 --> 00:00:43.520 To advanced rendering, testing, the whole life cycle. 16 00:00:43.600 --> 00:00:47.920 Really, it's about understanding the well, the elegance and power 17 00:00:48.039 --> 00:00:52.000 view brings precisely. Okay, let's unpack this. Then Shavin kicks 18 00:00:52.000 --> 00:00:54.719 things off by highlighting why learning a framework like view 19 00:00:54.799 --> 00:00:55.799 is just so vital. 20 00:00:55.880 --> 00:00:56.039 Now. 21 00:00:56.799 --> 00:00:59.560 It's not just hype, No, it directly impacts you know, 22 00:00:59.679 --> 00:01:02.960 product quality, development, cost, coding standards. 23 00:01:02.600 --> 00:01:04.400 Even just making development easier, right. 24 00:01:04.359 --> 00:01:07.480 Totally for anyone in web deev front end full stack 25 00:01:07.719 --> 00:01:11.920 knowing a framework like View it's becoming kind of crucial. 26 00:01:12.120 --> 00:01:15.719 That's a really key point. And views rapid growth, especially 27 00:01:15.799 --> 00:01:19.079 back around what twenty eighteen, that really shows its strengths. 28 00:01:19.159 --> 00:01:21.799 It's known for being approachable but also adaptable. 29 00:01:22.040 --> 00:01:25.120 Exactly, it's a user friendly, but you can build serious 30 00:01:25.120 --> 00:01:28.879 stuff with it. We're talking scalable, interactive web apps that 31 00:01:28.920 --> 00:01:30.079 actually perform well. 32 00:01:30.239 --> 00:01:33.840 And Chavin mentions the documentation Apparently it's exceptionally good. 33 00:01:33.959 --> 00:01:38.040 Oh yeah, that's a huge plus. Well written, easy to follow, 34 00:01:38.519 --> 00:01:39.760 makes a big difference when you're. 35 00:01:39.719 --> 00:01:43.159 Learning what's the ecosystem. Tools like view router for navigation, 36 00:01:43.519 --> 00:01:47.159 Pazina for state management, they help streamline setup. 37 00:01:47.359 --> 00:01:51.760 Definitely, having those solid official tools ready to go simplifies 38 00:01:51.799 --> 00:01:52.280 things a lot. 39 00:01:52.359 --> 00:01:54.560 Okay, now this is interesting, Chavine says, if you've used 40 00:01:54.599 --> 00:02:00.280 older tech like Angular JS or like even jQuery, use 41 00:02:00.319 --> 00:02:02.200 API's might feel kind of familiar. 42 00:02:02.319 --> 00:02:04.280 That makes sense. There's a lineage there in some way. 43 00:02:04.120 --> 00:02:06.680 And the template syntax is designed to be easier for 44 00:02:06.840 --> 00:02:09.680 handling data and dom events. 45 00:02:10.000 --> 00:02:13.319 Yeah, lowers that barrier to entry. View manages to blend 46 00:02:13.360 --> 00:02:17.759 that ease of getting started with some really robust capabilities underneath. 47 00:02:17.759 --> 00:02:21.080 So clear epis straightforward. Templates get you going quickly. 48 00:02:20.879 --> 00:02:23.639 But the underlying design lets you build complex things, and 49 00:02:23.680 --> 00:02:26.520 that strong ecosystem, like we said, makes a huge difference. 50 00:02:26.560 --> 00:02:28.919 Okay, so you're sold on View, Where do you actually start? 51 00:02:29.000 --> 00:02:32.479 Let's talk setup. Shavin says, NOJS first, right. 52 00:02:32.479 --> 00:02:34.680 Got to have NOE installing It gives you the node 53 00:02:34.680 --> 00:02:36.240 command itself and also. 54 00:02:36.080 --> 00:02:39.639 MPM, NPM the node package manager. You can check your 55 00:02:39.759 --> 00:02:41.759 version node V. 56 00:02:41.639 --> 00:02:43.520 In the terminal node V easy check. 57 00:02:43.599 --> 00:02:47.280 And NPM is how you grab packages like View itself exactly. 58 00:02:47.479 --> 00:02:50.280 It manages all those external libraries your project depends on. 59 00:02:50.400 --> 00:02:52.400 You check its version with NPMV. 60 00:02:52.199 --> 00:02:55.759 And keep it updated with NPM. Install NPM at latest G. 61 00:02:56.280 --> 00:02:58.879 That mash G is for global right mm hmm makes 62 00:02:58.879 --> 00:03:02.159 it available everywhere on your system. Think of NPM like, well, 63 00:03:02.199 --> 00:03:04.840 it stops you having to manually find and download every 64 00:03:04.879 --> 00:03:08.680 single piece of code you need. It handles the dependencies. 65 00:03:08.000 --> 00:03:10.360 Avoids dependency hell as they say. 66 00:03:10.120 --> 00:03:12.159 Pretty much, Yeah, keeps things organized. 67 00:03:12.479 --> 00:03:15.680 Chavin also mentions yarn though another package manager. 68 00:03:15.759 --> 00:03:18.719 Yeah, it's an alternative to NPM. The book uses yarn 69 00:03:18.800 --> 00:03:20.360 for examples, actually. 70 00:03:20.039 --> 00:03:22.400 So you'd check with yarns get a packages with yarn 71 00:03:22.520 --> 00:03:25.360 ad and install everything for a project with just yarn. 72 00:03:25.520 --> 00:03:28.800 Right, it shows the flexibility you know mpm's default yarn 73 00:03:28.879 --> 00:03:32.360 is Another popular choice point is you need a package manager? 74 00:03:32.479 --> 00:03:37.639 Gotcha? Okay? Note installed package manager ready? What about actually 75 00:03:37.759 --> 00:03:39.639 like building the view project? 76 00:03:39.800 --> 00:03:43.039 So the community is largely shifted now away from the 77 00:03:43.080 --> 00:03:47.800 old view CLI which used Webpack, towards Vite exactly. Vite 78 00:03:47.840 --> 00:03:49.319 is the default now it's fast. 79 00:03:49.360 --> 00:03:51.159 And how do you start a new project with it? 80 00:03:51.319 --> 00:03:54.599 Super simple? Command NPM and itview at latest. 81 00:03:54.759 --> 00:03:55.919 NPM in it view at latest. 82 00:03:56.000 --> 00:03:58.360 Okah, that runs create view, which is the official tool. 83 00:03:58.599 --> 00:04:01.199 It asks you a few questions, sets up the basic 84 00:04:01.240 --> 00:04:02.319 project structure for you. 85 00:04:02.439 --> 00:04:04.479 Why the shift to vite. What makes it faster? 86 00:04:04.840 --> 00:04:08.159 Well? It leverages native es modules in the browser during development, 87 00:04:08.520 --> 00:04:10.039 so instead of budling everything. 88 00:04:09.800 --> 00:04:11.479 Up front like webpac often does. 89 00:04:11.879 --> 00:04:14.680 Right, vites are of code pieces as the browser requests them. 90 00:04:14.840 --> 00:04:17.879 Much faster startup, much quicker updates when you change code. 91 00:04:18.040 --> 00:04:19.120 Big win for developers. 92 00:04:19.360 --> 00:04:23.160 Makes sense. Okay, project set up done? Now? Performance? You 93 00:04:23.199 --> 00:04:26.360 mentioned view as performance Chavine talks about the virtual dom. 94 00:04:26.680 --> 00:04:29.319 Ah, yes, the virtual dom. This is key. 95 00:04:29.720 --> 00:04:32.120 So the browser makes this thing called the dom from 96 00:04:32.360 --> 00:04:34.879 HTML right a tree structure. 97 00:04:34.600 --> 00:04:37.600 Yep, and changing that real dom directly, especially often to 98 00:04:37.720 --> 00:04:40.120 slow It forces the browser to. 99 00:04:40.079 --> 00:04:43.480 Repaint, which is expensive computationally. 100 00:04:42.839 --> 00:04:46.199 Speaking, exactly, especially on complex pages with lots of updates. 101 00:04:46.319 --> 00:04:48.160 Older frameworks sometimes struggled there. 102 00:04:48.319 --> 00:04:51.959 So View's solution is this virtual dom, which is what 103 00:04:52.319 --> 00:04:55.240 exactly a JavaScript object basically. 104 00:04:55.319 --> 00:04:58.560 Yes, it's a lightweight JavaScript representation like a blueprint of 105 00:04:58.560 --> 00:05:01.480 the actual dom v nodes virtual nodes. 106 00:05:01.560 --> 00:05:05.040 Okay, So when data changes in your view app, View. 107 00:05:04.920 --> 00:05:08.000 Updates this virtual dom first, which is super fast, just 108 00:05:08.120 --> 00:05:10.279 changing JavaScript objects in memory. 109 00:05:10.040 --> 00:05:12.000 And then it figures out the best way to update. 110 00:05:11.759 --> 00:05:15.879 The real dom precisely. It calculates the minimum necessary changes 111 00:05:15.920 --> 00:05:19.199 and applies them in batches, like editing a draft before 112 00:05:19.240 --> 00:05:20.720 finalizing the master copy. 113 00:05:20.800 --> 00:05:24.319 So it does a bit more work upfront in JavaScript. 114 00:05:23.879 --> 00:05:27.000 To avoid the much costly er direct dom manipulation. 115 00:05:27.399 --> 00:05:29.959 That's the trade off, and that's why view feel smooth, 116 00:05:30.160 --> 00:05:31.800 especially with frequent updates. 117 00:05:32.000 --> 00:05:34.839 That's a huge part of it. Fewer expensive repaints mean 118 00:05:34.879 --> 00:05:36.519 a more responseive UI. 119 00:05:36.560 --> 00:05:39.439 Okay, cool, So how does a U app actually start? 120 00:05:39.720 --> 00:05:41.360 Chavin mentions a root instance. 121 00:05:41.680 --> 00:05:44.279 Yeah, every view app has a root component instance it's 122 00:05:44.279 --> 00:05:45.360 the foundation. 123 00:05:45.199 --> 00:05:47.040 And other components are nested inside it. 124 00:05:47.879 --> 00:05:50.519 And the whole app gets mounted attached to a specific 125 00:05:50.639 --> 00:05:54.120 HTML element, often a div with eight app you use 126 00:05:54.199 --> 00:05:56.079 app do mount hashtag app. 127 00:05:55.839 --> 00:05:59.800 And configuring these components. The main way is the options API. 128 00:06:00.040 --> 00:06:02.160 That's one of the core ways. Yes, it's basically a 129 00:06:02.279 --> 00:06:06.079 JavaScript object with different properties or options that define the 130 00:06:06.120 --> 00:06:07.000 component's behavior. 131 00:06:07.040 --> 00:06:08.399 Let's break down some key options. 132 00:06:08.480 --> 00:06:13.000 First, data right, Data is a function. Importantly, it returns 133 00:06:13.000 --> 00:06:14.000 an object. 134 00:06:13.680 --> 00:06:17.120 And that object holds the components reactive data exactly. 135 00:06:17.319 --> 00:06:20.680 Reactive means when these properties change, View knows and it 136 00:06:20.720 --> 00:06:22.720 automatically updates the parts of the UI. 137 00:06:22.600 --> 00:06:24.360 That use them, and you use them in the template 138 00:06:24.439 --> 00:06:25.759 with double curly braces. 139 00:06:25.839 --> 00:06:29.240 Yep, property name. That's one way data binding data flows 140 00:06:29.240 --> 00:06:31.120 from the component to the template. 141 00:06:31.199 --> 00:06:34.160 Shaven recommends the viewdev Tools extension here. 142 00:06:34.360 --> 00:06:37.800 Oh absolutely essential. Lets you inspect even edit that reactive 143 00:06:37.879 --> 00:06:41.480 data live in your browser. Great for debugging and understanding 144 00:06:41.519 --> 00:06:42.000 what's happening. 145 00:06:42.079 --> 00:06:44.560 Okay. Then there's v model that's for two way binding. 146 00:06:44.680 --> 00:06:47.319 Correct. It creates a direct link between say, an input 147 00:06:47.319 --> 00:06:49.120 field and a data property. 148 00:06:48.800 --> 00:06:51.319 So user types in the input data updates you change 149 00:06:51.360 --> 00:06:53.680 the data incode input updates. 150 00:06:53.399 --> 00:06:57.079 Exactly, super common for forms, and it has modifiers like 151 00:06:57.120 --> 00:06:58.639 dot trim to remove white. 152 00:06:58.399 --> 00:07:02.399 Space, lazy to update on on blur not every keystroke. 153 00:07:02.120 --> 00:07:04.240 And dot number to try and cast the input to 154 00:07:04.279 --> 00:07:05.839 a number. Handy shortcuts. 155 00:07:05.959 --> 00:07:09.560 What about just binding data to HTML attributes. 156 00:07:09.000 --> 00:07:12.319 One way that's v bind or the shorthand just to colon. 157 00:07:12.480 --> 00:07:14.959 So like ming dot src imager. 158 00:07:14.600 --> 00:07:19.399 Decisely binds the image of data property to the src attribute. 159 00:07:19.439 --> 00:07:21.439 You can bind almost any attribute. 160 00:07:20.959 --> 00:07:23.439 And Shavin says you can bind a whole object. 161 00:07:23.639 --> 00:07:27.680 Yeah, like die dot index, dot index, dot index. If 162 00:07:27.720 --> 00:07:31.800 the object keys match attribute names, view applies them neat and. 163 00:07:31.639 --> 00:07:34.160 You can use the colon for dot class in dot 164 00:07:34.199 --> 00:07:36.839 style too. For dynamic styling. 165 00:07:36.519 --> 00:07:38.920 Definitely, you can bind dot class to an object where 166 00:07:38.959 --> 00:07:42.120 keys are class names and values are booleans, or to 167 00:07:42.240 --> 00:07:44.600 an array of class names. Same idea for dot style 168 00:07:44.839 --> 00:07:47.959 binding to an object of CSS properties. Very flexible. 169 00:07:48.079 --> 00:07:50.959 Okay, what about lists rendering rays of things. 170 00:07:51.000 --> 00:07:52.839 That's the V for directive. You put it on the 171 00:07:52.839 --> 00:07:53.600 element you want to. 172 00:07:53.519 --> 00:07:57.040 Repeat like leaf V for iteman items exactly. 173 00:07:57.079 --> 00:08:00.439 It loops over the items array or object properties and 174 00:08:00.480 --> 00:08:01.759 live for each one and. 175 00:08:01.680 --> 00:08:04.600 The crucial thing here is the dot key attribute. 176 00:08:04.079 --> 00:08:08.279 Absolutely trucal live for item and items key item, dot ID, 177 00:08:08.600 --> 00:08:10.439 you need to give each item a unique key. 178 00:08:10.560 --> 00:08:11.600 Why is that so important? 179 00:08:11.680 --> 00:08:14.639 It helps view track each element efficiently. When the list 180 00:08:14.720 --> 00:08:18.199 changes items added, removed, reordered, View uses the key to 181 00:08:18.240 --> 00:08:21.000 figure out the minimal updates needed. Without keys, it might 182 00:08:21.040 --> 00:08:23.639 have to rerender much more, which hurts performance. 183 00:08:23.920 --> 00:08:28.720 Gotcha keys are essential for list performance now handling user 184 00:08:28.759 --> 00:08:30.040 actions like clicks. 185 00:08:30.279 --> 00:08:34.039 That's v on or the shorthand at say so, at click, 186 00:08:34.279 --> 00:08:35.159 do something. 187 00:08:35.000 --> 00:08:37.799 Attaches an event. Listener calls a method in your component 188 00:08:37.919 --> 00:08:39.320 do something in this case yep. 189 00:08:39.559 --> 00:08:42.399 Or you can put simple inline JavaScript expressions right there 190 00:08:42.440 --> 00:08:45.120 like at click count plus plus meg. But for anything, 191 00:08:45.159 --> 00:08:46.399 complex methods are. 192 00:08:46.279 --> 00:08:49.440 Better, and ven O's modifiers too, like stop and dot prevent. 193 00:08:49.399 --> 00:08:52.399 Right at click. Dot stop prevents the event bubbling up 194 00:08:52.399 --> 00:08:55.720 the dom. At click, dot prevent stops the browser's default action, 195 00:08:56.200 --> 00:08:57.480 like preventing form submission. 196 00:08:57.720 --> 00:09:00.159 There are others too, self not wants. 197 00:09:00.120 --> 00:09:03.279 Dot capture Yeah, dot self means the event must originate 198 00:09:03.320 --> 00:09:06.360 on this specific element, not bubble up from a child. 199 00:09:06.919 --> 00:09:10.240 Johns makes the listener fire only one time. Dot capture 200 00:09:10.399 --> 00:09:13.960 uses the capture phase of event handling, which is less 201 00:09:14.000 --> 00:09:15.159 common but sometimes. 202 00:09:14.879 --> 00:09:18.000 Useful, and specific key modifiers like at keydown dot enter 203 00:09:18.080 --> 00:09:18.679 super handy. 204 00:09:18.879 --> 00:09:21.279 Instead of checking event dot key coode, you just use 205 00:09:21.320 --> 00:09:23.519 a key doown dot enter or at keyp dot shift. 206 00:09:23.720 --> 00:09:24.360 Much cleaner. 207 00:09:24.399 --> 00:09:27.240 You can chain them like at keydown dot ctrl dot enter. 208 00:09:27.559 --> 00:09:31.159 You can, though shaven notes using key coodes like part 209 00:09:31.200 --> 00:09:34.320 one three for enter might be more reliable for complex 210 00:09:34.399 --> 00:09:39.200 chaining than keynames sometimes, and there's dot exact for requiring 211 00:09:39.200 --> 00:09:40.919 only the specified modifiers. Okay. 212 00:09:41.279 --> 00:09:45.720 Last directive in this group conditional rendering showing hiding elements right. 213 00:09:45.840 --> 00:09:49.080 V IF, VLSIF and VLS e if takes an expression. 214 00:09:49.440 --> 00:09:52.519 If it's truth y, the element is rendered exactly. 215 00:09:52.759 --> 00:09:55.480 If it's false, the element isn't just hidden, it's completely 216 00:09:55.519 --> 00:09:56.519 removed from the dom. 217 00:09:56.440 --> 00:09:58.759 And VLS must follow via. 218 00:09:58.720 --> 00:10:02.159 Or vlsif it renders if the preceding VF or vlsf 219 00:10:02.279 --> 00:10:05.519 was false allows you to change conditions. 220 00:10:04.879 --> 00:10:09.200 So VF actually at removes elements, unlike just using CSS 221 00:10:09.240 --> 00:10:10.320 display right. 222 00:10:10.320 --> 00:10:15.200 None correct, it's true conditional rendering, not just toggling visibility. Right. 223 00:10:15.600 --> 00:10:19.080 Okay, Moving on, let's talk component life cycle. Components have stages. 224 00:10:18.799 --> 00:10:21.679 Right, They do from creation to destruction and view gives 225 00:10:21.720 --> 00:10:24.360 you hooks functions you can define to run code at 226 00:10:24.399 --> 00:10:25.519 specific points in that. 227 00:10:25.440 --> 00:10:27.320 Cycle, like what what are some key hooks? 228 00:10:27.480 --> 00:10:30.200 Well, early on you have before creating, created, then before 229 00:10:30.279 --> 00:10:32.840 mountain mounted, just before and after it's added. 230 00:10:32.559 --> 00:10:36.840 To the down mounted sounds useful, like for fetching data. 231 00:10:36.440 --> 00:10:40.440 Exactly common use case. Then when data changes and the 232 00:10:40.480 --> 00:10:42.639 component updates, you get before. 233 00:10:42.399 --> 00:10:44.600 Update and updated, and when it's removed. 234 00:10:44.240 --> 00:10:47.759 For unmounted unmounted Yeah, good for cleanup, like clearing timers 235 00:10:48.159 --> 00:10:50.399 or removing manual event listeners you might have added. 236 00:10:50.480 --> 00:10:53.600 You mentioned the composition API earlier, Shavin talks about a 237 00:10:53.639 --> 00:10:55.440 setup hook related to that. 238 00:10:55.639 --> 00:10:58.960 Yes, setup is the entry point for the composition API. 239 00:10:59.039 --> 00:11:02.320 It actually runs before four before create and create it. 240 00:11:02.320 --> 00:11:05.279 And the script setup syntax kind of hides that complexity, right. 241 00:11:05.320 --> 00:11:09.440 Script setup handles the setup part implicitly, making it more concise. 242 00:11:09.919 --> 00:11:12.919 The setup function gets props and a contact object. What's 243 00:11:12.960 --> 00:11:16.320 in the context useful stuff access to attributes passed to 244 00:11:16.360 --> 00:11:19.759 the component slots which let you pass markup into the component, 245 00:11:20.120 --> 00:11:22.240 and the emit function for sending events up to the parent. 246 00:11:22.320 --> 00:11:24.080 And you can use set up with render functions too. 247 00:11:24.360 --> 00:11:26.360 For really low level control you can. 248 00:11:26.519 --> 00:11:30.039 Yeah, if you need very dynamic rendering logic where templates 249 00:11:30.039 --> 00:11:33.200 get awkward, setup can return render function using the h 250 00:11:33.240 --> 00:11:35.480 function to create v nodes programmatically. 251 00:11:35.799 --> 00:11:39.960 Okay, now, derived data. What if one piece of data 252 00:11:40.000 --> 00:11:40.840 depends on another. 253 00:11:41.000 --> 00:11:43.799 That's what computed properties are for. You use the computed 254 00:11:43.799 --> 00:11:47.279 option and these are cased. Yes, that's the key benefit. 255 00:11:47.559 --> 00:11:51.120 A computed property only recalculates its value if one of 256 00:11:51.120 --> 00:11:56.360 the reactive properties depends on changes. Otherwise, it just returns 257 00:11:56.399 --> 00:11:59.840 the cached value. Very efficient for complex calculations. 258 00:12:00.080 --> 00:12:02.639 But what if you need to do something else when 259 00:12:02.720 --> 00:12:06.399 data changes, like not just calculative value, but run some code, 260 00:12:06.480 --> 00:12:07.360 an API call. 261 00:12:07.559 --> 00:12:09.399 That's where watchers come in the watch. 262 00:12:09.120 --> 00:12:12.480 Option, so you watch a specific data property and. 263 00:12:12.519 --> 00:12:15.600 Provide a callback function that runs whenever that property changes. 264 00:12:15.720 --> 00:12:18.080 It's for side effects, and you have options like deep 265 00:12:18.159 --> 00:12:20.240 for watching inside objects yep, deep. 266 00:12:20.159 --> 00:12:23.639 True watches nested properties, and immediate true makes the watcher 267 00:12:23.720 --> 00:12:26.440 run once right away when the component is created, not 268 00:12:26.480 --> 00:12:27.720 just unchanges makes sense. 269 00:12:27.799 --> 00:12:31.080 Okay. Communication between components. How does a parent talk to a. 270 00:12:31.159 --> 00:12:34.080 Child primarily through props? Props are like custom attributes. 271 00:12:34.120 --> 00:12:36.399 You passed down using v bind or the cull in 272 00:12:36.480 --> 00:12:39.240 shorthand like child component message parent. 273 00:12:39.039 --> 00:12:41.799 Data exactly, and the child component has to declare the 274 00:12:41.799 --> 00:12:44.320 props it expects using the props option. 275 00:12:44.360 --> 00:12:46.960 Or define crops in script setup. 276 00:12:47.080 --> 00:12:50.159 Right, you can specify types for props, make them required, 277 00:12:50.360 --> 00:12:52.600 give them default values. It's a clear contract. 278 00:12:52.639 --> 00:12:54.919 How does the child talk back to the parent. 279 00:12:54.799 --> 00:12:59.200 By emitting custom events? The child calls this emit event 280 00:12:59.279 --> 00:13:02.159 name optional pay load in the options API. 281 00:13:02.080 --> 00:13:04.840 Or uses the emit function from setup or define up 282 00:13:05.120 --> 00:13:06.840 in script setup, and. 283 00:13:06.720 --> 00:13:09.519 The parent listens for that event using v on or 284 00:13:09.559 --> 00:13:12.639 at on the child component tag like child component at 285 00:13:12.639 --> 00:13:14.480 event name, handle event. 286 00:13:14.440 --> 00:13:17.639 Okay, props down events up. What if components are nested 287 00:13:17.720 --> 00:13:21.039 really deep? Passing drops through many levels sounds tedious? 288 00:13:21.320 --> 00:13:23.600 It can be. That's where provide an inject come in 289 00:13:23.639 --> 00:13:26.399 a great inject Yeah, a parent or ancestor component can 290 00:13:26.440 --> 00:13:28.840 provide some data or functionality. 291 00:13:28.159 --> 00:13:31.679 And any descendant component, no matter how deep, can inject. 292 00:13:31.399 --> 00:13:34.600 It exactly bypasses all the intermediate components. Great for global 293 00:13:34.600 --> 00:13:37.360 things like user authentication, status or theme settings. 294 00:13:37.440 --> 00:13:39.879 Cool. And one more thing here, teleport what's that? 295 00:13:40.399 --> 00:13:42.639 Telecord is neat It lets you render a part of 296 00:13:42.679 --> 00:13:45.840 your component's template somewhere else of the dom entirely. 297 00:13:45.720 --> 00:13:47.919 Like outside the component's normal place. 298 00:13:48.080 --> 00:13:51.120 Right. Think modals or pop up notifications. You might want 299 00:13:51.159 --> 00:13:54.039 them rendered directly under the body tag to avoid CSSZ 300 00:13:54.120 --> 00:13:57.679 index issues or clipping from parent elements. 301 00:13:57.320 --> 00:13:59.879 So you use teleport to hashtag modal, target or something. 302 00:14:00.000 --> 00:14:02.960 Actly. You specify the target selector using the two problems. 303 00:14:03.000 --> 00:14:06.000 All right, let's circle back to the composition API. Chavin 304 00:14:06.120 --> 00:14:10.600 covers it extensively. It's an alternative way to organize component logic. 305 00:14:10.480 --> 00:14:15.440 Yes using functions. The core ideas are ref and reactive. 306 00:14:15.559 --> 00:14:19.039 For a primitive values like strings or numbers. 307 00:14:18.759 --> 00:14:21.919 Generally yes, or when you need to potentially reassign the 308 00:14:21.919 --> 00:14:24.519 whole thing. It wraps the value in an object and 309 00:14:24.559 --> 00:14:26.879 you access it using dot value, So my. 310 00:14:26.919 --> 00:14:29.240 Ref dot value to get or set the value. 311 00:14:29.399 --> 00:14:32.600 Correct and reactive is for objects or rays. It makes 312 00:14:32.639 --> 00:14:34.519 the object itself reactive. 313 00:14:34.159 --> 00:14:36.759 So you just modify properties directly on the reactive object. 314 00:14:36.840 --> 00:14:41.240 Yep, my reactive object dot property, new value, view tracks. 315 00:14:40.919 --> 00:14:44.080 It and computed properties and watchers exist in the composition 316 00:14:44.120 --> 00:14:44.799 API two. 317 00:14:45.159 --> 00:14:48.559 They do you import and use computed and watch or 318 00:14:48.679 --> 00:14:49.639 watch effect functions. 319 00:14:49.679 --> 00:14:52.759 The real power seems to be incomposables. What are those? 320 00:14:53.200 --> 00:14:57.840 Composables are reusable pieces of logic built with composition API functions. 321 00:14:58.399 --> 00:15:01.600 Think of them as custom hooks like in React, but 322 00:15:01.679 --> 00:15:02.200 for View. 323 00:15:02.559 --> 00:15:04.960 So you extract stateful logic. 324 00:15:04.679 --> 00:15:07.960 Into a function exactly like you could create a use 325 00:15:08.039 --> 00:15:13.360 mouse position composable that tracks the mouse coordinates using ref internally. 326 00:15:12.919 --> 00:15:16.279 And then reuse that use mouse position logic in any 327 00:15:16.279 --> 00:15:18.000 component that needs it precisely. 328 00:15:18.120 --> 00:15:21.279 It makes your code much more organized, reusable, and testable. 329 00:15:21.679 --> 00:15:25.000 A use fetch composable for API calls is another classic. 330 00:15:24.639 --> 00:15:28.279 Example that sounds powerful. Okay, shifting gears to more advanced 331 00:15:28.320 --> 00:15:30.519 rendering render functions. 332 00:15:30.159 --> 00:15:33.559 Right, we touched on this. Using the H function directly 333 00:15:33.600 --> 00:15:36.759 to create vnodes gives you full programmatic control over the output. 334 00:15:37.039 --> 00:15:38.559 Good for highly dynamic. 335 00:15:38.120 --> 00:15:40.799 Stuff, and JSX is an alternative syntax for that. 336 00:15:40.919 --> 00:15:43.960 Yeah, it's like writing HTML inside your JavaScript. Some people, 337 00:15:44.039 --> 00:15:46.919 especially from a React background, prefer it over templates. 338 00:15:47.279 --> 00:15:49.159 View supports it dynamic components. 339 00:15:49.240 --> 00:15:52.759 What's the use case using component dot is component name variable. 340 00:15:53.200 --> 00:15:55.720 You can switch which component gets rendered in a particular 341 00:15:55.799 --> 00:15:58.879 spot just by changing the value of component name variable. 342 00:15:59.039 --> 00:16:02.000 Think tabs or different views based on user. 343 00:16:01.840 --> 00:16:04.240 Selection and plugins adding global stuff. 344 00:16:04.360 --> 00:16:07.840 YEP plugins let you add global components, methods, or integrate 345 00:16:07.879 --> 00:16:11.440 libraries like view router or Plena into your whole application 346 00:16:11.759 --> 00:16:13.960 via app dot use Mike Luggins. 347 00:16:13.559 --> 00:16:16.480 Speaking of view Router, that's for single page apps right 348 00:16:16.960 --> 00:16:18.679 handling navigation exactly. 349 00:16:18.720 --> 00:16:22.000 It's the official router. It maps URL paths to your 350 00:16:22.120 --> 00:16:22.879 view components. 351 00:16:23.039 --> 00:16:26.639 So about shows the about component, Users shows the user's component. 352 00:16:26.720 --> 00:16:28.200 Pretty much. You define those mappings. 353 00:16:28.320 --> 00:16:31.039 You use router view as the placeholder where the match 354 00:16:31.120 --> 00:16:31.960 component appears. 355 00:16:32.080 --> 00:16:34.679 Correct Router views where the content changes based on. 356 00:16:34.679 --> 00:16:37.840 The URL, and Router link for a navigation instead of 357 00:16:37.919 --> 00:16:38.840 regular autags. 358 00:16:38.919 --> 00:16:42.440 Yes, routerlink to about creates the link and handles the 359 00:16:42.519 --> 00:16:45.600 navigation without a full page reload. Keeps it feeling like 360 00:16:45.679 --> 00:16:46.080 an app. 361 00:16:46.320 --> 00:16:49.679 Does it handle dynamic parts in the URL like users 362 00:16:49.679 --> 00:16:50.720 one two three, Oh. 363 00:16:50.720 --> 00:16:55.120 Yeah, dynamic routes, users, dot ID, nested routes like having 364 00:16:55.159 --> 00:16:58.639 subviews within a user profile, route guards for controlling access. 365 00:16:59.039 --> 00:17:00.000 It's very cabable. 366 00:17:00.039 --> 00:17:04.279 Okay. State management for data shared across many components. You 367 00:17:04.319 --> 00:17:05.720 mentioned Pinia, Yes. 368 00:17:05.680 --> 00:17:10.240 Pinia is the official recommended state management library, now replaced fux. 369 00:17:11.160 --> 00:17:12.599 It uses stores right. 370 00:17:12.720 --> 00:17:16.079 You define stores to hold specific pieces of your application state. 371 00:17:16.160 --> 00:17:18.440 What's inside a store typically. 372 00:17:18.000 --> 00:17:21.519 State, the actual data usually return from a function, getters 373 00:17:22.000 --> 00:17:26.640 like computed properties for the store, and actions methods for 374 00:17:26.759 --> 00:17:27.359 changing the state. 375 00:17:27.400 --> 00:17:29.640 And it's built with the composition API in mind. 376 00:17:29.759 --> 00:17:32.839 Very much. So you define stores with define store and 377 00:17:32.960 --> 00:17:35.599 access them in components using a composable like function. 378 00:17:35.759 --> 00:17:39.680 Conventionally use my store and something called store terrefs ah. 379 00:17:39.759 --> 00:17:42.960 Yeah. If you want to destructure state properties or getters 380 00:17:42.960 --> 00:17:46.400 from a store in your component, storage threats keeps them reactive, 381 00:17:46.480 --> 00:17:48.880 Otherwise you might lose reactivity if you just pull them 382 00:17:48.920 --> 00:17:49.480 out directly. 383 00:17:49.599 --> 00:17:52.960 Got it. Styling components, how do you avoid CSS conflicts 384 00:17:52.960 --> 00:17:53.880 between components? 385 00:17:54.079 --> 00:17:56.880 The easiest way is style scoped. Just add the scope 386 00:17:56.920 --> 00:17:58.640 attribute to your style tech. 387 00:17:58.400 --> 00:18:01.839 And view automatically makes those styles only apply to that component. 388 00:18:01.960 --> 00:18:05.000 Yep. Under the hood, it adds unique data attributes data 389 00:18:05.119 --> 00:18:08.960 v something to your component's elements and scopes the CSS 390 00:18:09.000 --> 00:18:12.839 selectors to match. Prevents styles leaking out or in what. 391 00:18:12.839 --> 00:18:16.079 About CSS modules style module. 392 00:18:15.799 --> 00:18:19.440 That's another scoping mechanism. It generates unique class names for 393 00:18:19.480 --> 00:18:22.680 your styles like BUTTONBC one, two, three, and make them 394 00:18:22.720 --> 00:18:25.559 available in your template via a special style object, so 395 00:18:25.599 --> 00:18:28.960 you'd write dot class styled dot. My button class offers 396 00:18:29.119 --> 00:18:30.559 very strong isolation. 397 00:18:30.319 --> 00:18:33.599 Cool now making things look nice when they appear or disappear. 398 00:18:34.039 --> 00:18:38.000 Transitions Yeah, view has built in support with the transition component. 399 00:18:38.079 --> 00:18:40.160 You wrap the element you want to animate, like one 400 00:18:40.160 --> 00:18:41.759 controlled by viv exactly. 401 00:18:42.039 --> 00:18:45.319