Use Computed Properties in Vue to Be More Efficient
Computed properties cache the results of the defined calculations and return that result as a prop to be used in the application.
We'll discuss how these computer properties are updated reactively when the underlying data changes. Computed properties come in handy when the operation that you perform is expensive, you'll only need to make the computation when data changes.
Instructor: [0:01] As well as accepting a methods key, our Vue configuration object also accepts a computed key. Like methods, the value for this is an object of functions. A computed property stores the results of a calculation and will only be updated if any reactive dependencies are updated.
[0:20] If I have a computed prop of now, which is, return.date.now, and then in my HTML was to render now, then I'm getting that value, but it's not updating because there's no reactive variable that is triggering an update. If I refresh the page, it will update and so on. If I leave it as it is, there's nothing to trigger an update.
[0:54] Instead of, now, let's add a computed property of soldOut. Let's say that soldOut will return this.tickets = . Vue now sees that this.tickets is being used to contribute this calculation. When tickets is updated, this calculation will be rerendered.
[1:16] Let's get rid of, now, and put our button back in again. Let's say we only want to see this if soldOut is false. We share it to our bucket button. We are going to keep adding tickets. That button is gone when soldOut is set to true. Let's see that again. Our computed soldOut is false. Our number of tickets is 10. Let's buy some tickets, soldOut computed it to be true, and our button is no longer available.
[1:52] Our example is not very complex, but the benefit of using a computed property is that if this is an expensive calculation, the result will be returned every time I refer to soldOut without recalculating, and will only be updated when the dependency variables update. For more complex manipulations, we're saving time.
It seems it is recalculated when the variable that 'soldOut' depends on is updated so in this case, when 'tickets' is updated, the value returned by 'soldOut' is recalculated.
I'm a little confused with the example. Is the instructor saying that only when the value of soldOut changes it recalculates? How would it know it changed without recalculating? Sorry, I'm sure it's simple and just flew right above my head.