The computed properties worked together as a cache for the list and made sure there weren't any side effects on the manipulation of the elements. With the conditional process, it was possible to change the rules of the filtering and sorting through a variable, and the display was updated in real-time:
- At the filteredList property, we took the baseList property and returned just the tasks that weren't finished. When the hideDone variable was false, we returned the whole list without any filter.
- At the sortedList property, we sorted the tasks on the filteredList property. When the sortById variable was true, the list was sorted by ID in descending order; when it was false, the sorting was done by the task finish time in ascending order.
- At the displayList property, when the reverse variable was true, the final list was reversed.
When all the manipulation was done, the displayList property returned the result of the data that was manipulated.
Those computed properties...