Challenge 2: Dependency Tracker

[00:00:00]
>> Evan You: We're gonna try to walk through the solution a little bit. So, if you've followed up until here, we kind of understand that all of this does is making sure that when this inner update function executes our dependency class can actually have access to the current active update.

[00:00:22]
That's the whole point, right? So, now that we have a grab of the current update or function that's being executed, we will register that of the function as a subscriber to this dependency. So we'll just add that active update into our subscriber list. Right? So, as you can see, okay, we'll talk about that later, but inside notify this is actually pretty straightforward.

[00:00:53]
ES6 also has the for each function, so we can just take the subscriber function and just invoke it. That's pretty much it. So this is actually the whole implementation. So, one thing to note here, is why are we using this wrapped update? We are registering the wrapped update as the active update.

[00:01:16]
So that when our dependency changes and the update function is called again, we're, in fact, calling this again, so that this little dependency tracking trick is still working on future iterations. So it keeps collecting dependencies. So this is important because in some cases, our updated function might contain conditionals.

[00:01:40]
So, one variable is true, it might collect this dependencies and when the variable is flipped, it might collect another dependency. So, in fact our dependency collecting system needs to be dynamically re-balancing these dependencies to make sure the dependency list is always up to date. So, our implementation, although working for our test case, in fact, misses some edge cases, for example, we need to clean up stale dependencies.

[00:02:13]
So if the execution no longer depends on a certain dependency, we need to actually clean it up. This is not accounted for in this simple implementation. And then, there's the question of how to deal with the raise, right? And the question of how to deal with newly added properties.

[00:02:30]
So, these are much more complex questions, and if you're interested, you should probably read the source code of Vue to figure that out. But due to the time here, we're gonna move on with this simple version of it.