Discussion on: Vue: When a computed property can be the wrong tool

[Valentin Berlier]

My first thought was to put the expensive operation (reversing the list) in its own computed:

const reversedList = computed(() => [...list].reverse())
const sortedList = computed(() => {
  return isOver100.value ? reversedList.value : [...list]
})

This way even though the sortedList computed property is updated often, it always uses the cached reversedList because Vue knows that reversedList only depends on the original list.

[Thorsten Lünborg]

Good idea, but in the example, sortedList was meant to be imagined as an expensive operation, mimicked by [...list] that operation still happens each time the count is increased and is still <101.

So this can be a way to work around the described problem in some scenarios but doesn't completely fit the imagined scenario here.

[Valentin Berlier]

Hmm yeah, but if it's the sorting that's expensive then you could have a computed property for the sortedList instead. It's the same thing, the idea is to separate the expensive operation into its own computed property.

[Josh Corbett]

While you may be right here, I don't think this is supposed to be a perfect example.

yes, this example is silly. Deal with it.