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

View post

Nice article and nice catch about the computed functions.

Thanks for thorough explanation on how computed props are excecuted and cached.
It's really usefull to bear that lazy nature of computed props in mind when you have lots of them and they depend on each other.

I spotted some mistakes though, which made it difficult to follow the article

According to the example, the openTodos relies on todo.done prop, and not just todos.length. Hence, the highlited statement is wrong.
I believe you just forgot to update your example, becase in the end of the article there is another example where openTodos does depend on todos.length
The example in the "When lazy evaluation can improve performance" section is outdated and is not the same as the one used in the Playground:
-- no "Toggle ListView" btn in the template
-- "hasOpenTodos" is not used in the template as well
-- "addTodo" function uses unknown "todo.value" vs "newTodo.value"

Please review the examples and the text

Thorsten Lünborg • Sep 6 '21

Thanks for the review. I fixed the example in your second point.

About the first point: It's not actually wrong in the place you thought, just an imrecise statement- the filter method would indeed not be run if the length of todos doesn't change - except if you would mutate the array with something like .reverse() or .sort().

But the example at the end of the article you refer to is indeed a copy-paste error from the initial example, so I fixed that to refer to openTodos.

Thanks again

Alexey Antipov • Sep 6 '21 • Edited

I tend to disagree :)

const todos = reactive([
  { title: 'Wahs Dishes', done: true},
  { title: 'Throw out trash', done: false }
])

const openTodos = computed(
  () => todos.filter(todo => !todo.done)
)

Reactive todos is deeply reactive, right?
So if you change "done" prop of any of the todos, then the computed openTodos will need to be reevaluated and rerun the filter method even though the length stays the same.

Thorsten Lünborg • Sep 6 '21

Argh. It's so hard to come up with good examples 😭

Yes you are right in this case - I wasn't really paying attention to what the filter did. 😬

Will see if I can change it to be more precise.