Computed Properties vs Watchers

[00:00:00]
>> In real world projects, could you go through and describe a little bit on when you would use a computer to property versus a watcher?
>> So the question here is around taking more real world example of why computer properties would be advantageous over watchers. So in the example of a data visualization model I think that's still remains probably one of the better examples of this in that if you were to try and take a look at any sort of SVG animation out there chart.

[00:00:37]
You'll know that for something like this, there are a lot of pieces that go into the computation of how this is being drawn, right? It could be as simple as how big the pie chart is being drawn or what the data that goes into whether or not it's being filled, what color it might be.

[00:00:51]
There's a lot that's happening here. And so if you try to watch all your dependencies in like individually, what people have found when they worked with sort of these larger code bases is that if they weren't careful with how they tracked their dependencies, they could trigger re renders in their code when they didn't expect to.

[00:01:07]
And we, for those who have had experience working on enterprise apps, there is almost no way you'll own the code base from end to end. So a lot of times you don't even know that someone is depending on the thing that you're talking like you're writing for. And so computer properties have the advantage of because the chains are being tracked basically explicitly via like, so again, let me go back.

[00:01:31]
When you use computed properties, not only are you containing the dependencies which I understand watch does do like because if we think about it when we did watch. You have to actually define the initial value that you're watching. So in this case what let's it was character let's say this character list.

[00:01:48]
And then on top of that like can you imagine what happens if you also like if this also had like this .character list is dependent on this dot let's see. What do I have favorite list? Once you start adding multiple things, especially when you're receiving data from an API, it becomes really difficult to start tracking where everything is.

[00:02:10]
And so computer properties, because you can basically just throw all your dependencies inside of a single compute function, it has the algorithm that's required for you to automatically do all the performance optimizations and caching that you would want to do. I think that's the best way I could explain it at this point.

[00:02:26]
And so remember the key thing here is not that watch is bad, is that watch is good for triggering side effects and computed. It's kind of when you import low dash and you do a debounce function on an API call cause you're afraid users will click. Like imagine compute it has like a debounce built in so that things don't automatically trigger like it knows how to protect you from those things that's the advantage of computing.