DEV Community

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

Collapse
vberlier profile image
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]
})
Enter fullscreen mode Exit fullscreen mode

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.

Collapse
linusborg profile image
Thorsten Lünborg Author

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.

Collapse
vberlier profile image
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.