Vue.js - Performance cost of update and render of an array

Question

I have a problem with array items rerendering. I hope someone can help me with it. There is a code: https://codesandbox.io/s/vuex-store-forked-2qx1g?file=/src/App.vue

We have component with array of items. Template renders only first item from collection. After 2 seconds we change first item title - updated hook is called, seems right After 4 seconds we add new item to array - updated hook is called again. Do I understand correctly that adding items to array will cause rerendering of all previous items?

Or updated hook means that virtual DOM is changed but no real rerendering happens? Anyway, can this situation be a performance issue on a big set of data?

Answer 1

From the updated hook docs we see this:

Called after a data change causes the virtual DOM to be re-rendered and patched.

When any instance data used in the render function has changed, the render function will be called again. No DOM will be replaced unless it's necessary.

In your example, Vue intelligently avoids any DOM changes, but the render function is still called on each update. So the only overhead is the render function itself, not a DOM change.

If your render function performs significantly expensive operations, (Ex. Huge arrays being sorted, mapped, filtered, etc.) then it's possible this could cause some performance issue. For example, if the template calls a method directly:

{{ ExpensiveSort() }}

This is the sort of thing to avoid doing in the template.