Event Handling Q&A

[00:00:00]
>> I wanna cover two questions that came up. The first of which is around the strategy of actually tracking the increment amount. So as we can see here what we're doing right now is using Vue to track the increment amount using this v-model directive. So down here we can see inside of this reactive data we have it tracked in here.

[00:00:16]
And the question is, why do we even do this? Which is actually a good question, because theoretically, if we go ahead and comment this out. And we go up here and we don't even attach any Vue powers to this particular input element. Technically the text element knows what it's doing, right?

[00:00:33]
I should have chose a smaller number, it's fine. It knows that it has 123 inside already. Why are we using Vue to also check it? So in other words, especially before sort of reactive frameworks became really a big thing. A common strategy for this was that every time you wanted to increment the count.

[00:00:51]
We would basically go and check the DOM to see what the source of truth is, right? And so a completely valid approach and one that we use for many, many years in Web development. But as websites and applications have gotten more complex, the problem is that if, we were to have some method.

[00:01:06]
Again, call it checkInputForValue that's being run right here. Again, this is pseudocode, just in case anyone's afraid they missed anything. The reason this ends up becoming a problem is because there ends up being kind of an inefficient performance bottleneck. In the sense that now every time someone's running this increment count, they're going to check the DOM.

[00:01:27]
Regardless of the fact that nothing has actually changed. And so that's what a lot of reactivity system has provided for us from a developer experience convenience. And also abstracting some of those performance concerns away is because again, for this particular example. The performance difference is probably negligible, to be honest, to just check an input element real quick.

[00:01:45]
If it's a number, pass it back and then run it. But we can envision when you have complex data visualizations, when you have a lot of things working with each other. If you have to check the DOM every single time for every single element that has that source of truth, you're gonna end up with some conflict.

[00:01:59]
And then it'll probably be slower because once again if those things haven't changed there's no reason to even check that to begin with. So, as a result of that, this is why in some of the more modern frameworks we have the ability to cache things and have these reactivity tracking.

[00:02:13]
And that's where the advantage of actually making sure that the tracks that reactive data makes our lives a lot easier. So great question again for that one. Okay, so let's go and reset this part real quick, so we don't ruin the code 123. And then we had the v-model here.

[00:02:34]
IncrementAmount, let me save that, make sure this works. This does great, okay. In addition, there was a second question here in regards to what happens when you actually want to pass an argument to the method. So in this particular case, what if, for example, an IncrementCount, we wanted to pass it our own variables, and in this case let's say 10.

[00:02:57]
And then for whatever reason, again, we're spitballing here. An increment count we're gonna check if the argument is greater than what's inside of this, that increment amount. Then we'll basically use the argument instead of the reactive variable. Again, a little bit convoluted, but we're kind of going on the fly here.

[00:03:14]
So in increment count, I mentioned before that typically when something's being run, it's by default pass an event object. So once again, to show that this works, let me just go ahead and log(event) real quick and then remove the argument. Save, refresh, Console, you can see the pointer event is being registered.

[00:03:36]
However, if I add that 10 here, refresh, you'll see 10 is being passed. And that's because what Vue does is it goes, okay, at this point I don't know how many arguments you're going to pass. Cuz you could pass a bunch of different ones if you wanted to.

[00:03:51]
And so rather than sort of force you to remember that the event object is there. The default event object that's being passed to you basically gets pushed to the end. So if we still wanted to access the event object in this regard, we would say for example, now this is not actually event, it's newAmount.

[00:04:08]
And then we also have the event object that's being attached at the end. So once again, just to make sure that this actually works as intended. So when it comes to how have you handled that default event. Because it cannot predict where the default event needs to be brought in basically, you explicitly define it.

[00:04:27]
So you can see here $event that passes the standard JavaScript event to the function. And that way in case you have any sort of funky things going on, it's very, very clear what you're looking for. The other thing I wanted to show with this as well in the docs is that, again, I'm not a huge fan of inline events.

[00:04:45]
But I just want you to know it is possible, you can inline the event directly there and just actually run the thing if you want. But generally speaking, I find that it's a lot cleaner to just have the method there. Because again, HTML is in my mind to be readable for users.

[00:05:00]
And then the logic and all that stuff we should abstract that away as much as humanly possible. Because what it does is it lowers the barrier of entry for those who might want to come and contribute. Particularly if you have designers on your team who are have frontend abilities, but night might not be that comfortable JavaScript.

[00:05:14]
By abstracting that stuff away, it just makes the code a lot more approachable for them. So the $event is the answer for that. So just to show that inside of the code actually, so that we have consistency. Here again, this is the event but it is not passed by default.

[00:05:35]
We need to go inside of here and we need to say $event. Now, when we increment, there we go. We have our pointer and we have our account. All right, question?
>> So what's the difference between the @click and the v-on:click. @click is that just an HTML5 attribute, right?

[00:05:57]
>> Okay, good question, no, it actually segues really well. So something you'll notice here is that right now we're doing this v-on and v-bind. Where is my v-bind, v-bind is gone in this particular case. Okay, that's fine, we interact with elements a lot as far as interactivity and events.

[00:06:17]
So rather than forcing you to type v-on all the time, there is a shorthand, which is the @ symbol. And so if you shortcut that, that'll basically do exactly what you expect in terms of the v-on. But otherwise it's a syntactic sugar to basically say you don't have to type those 12345 characters anymore.

[00:06:33]
Just do @, which honestly, I think is a fairly intuitive shortcut when it comes to saying yes @click do this thing @keyup, do this thing, etc. And so I mentioned v-bind and just for the sake of showing that one, I'll just do a data attribute called increment-by. Cuz sometimes you're rendering stuff to the server or some other app needs something here.

[00:06:57]
And let's say you wanna render incrementAmount to this p element. And so if you look at this p element right here, did I do the wrong one? I didn't refresh, that's why. Boom, okay, you see that the attribute data increment-by is there available for you. But once again, we need it to be bound and I said before that you could do v-bind.

[00:07:22]
And that will go ahead and change that to actually say, yes, the increment-by we're looking at is 8. But again, dynamically binding attributes, very, very common. So what can you do instead, you can just delete v-bind and just prefix your attribute with the : another shorthand. Right or wrong way, there's no right or wrong way.

[00:07:40]
Most people end up eventually getting used to the convention. So you see that a lot in code bases but otherwise it's up to you on how you want to write your total.