List rerenders every time any variable changes even unrelated

Good day!
I download log of 1000+ entries as a JSON. Each entry is a multi-level object. I parse JSON, sort array and filter it. I divided it to 3 different ‘computed’ functions to avoid excessive parsing or sorting. Each ‘computed’ function acts as a pipe, getting data from previous function like:

computed: {
  cArray() {
    return parse(json);
  },

  cArraySorted() {
    return cArray.sort(...);
  },

  cArraySortedFiltered() {
    return cArraySorted.filter(...);
  }
}

so if I change search string only arraySortedFiltered() gonna call.

arraySortedFiltered is rendering as table (not real table but divs stylized as a table).

THE PROBLEM: every time I change any data-section variable via v-model it tooks 1-2 sec to reflect changes: <input v-model="test">. If I make it via @input it works fine: <input @change="changeVar">.

Profiler shows that Vue rerenders my big table every time any data-section variable are changing even if nothing related to the table changed, neither input data nor sorting/searching variables. Why is this and how to avoid it?

This is how Vue works. Whenever any dependency of the template changes, the whole virtual dom for that component is re-rendered.

Mvd the list into its own child component to optimize this.

But manual says Vue is smart and doesn’t rerender any unchanged objects/elements/whatever?

Why it doesn’t rerender whole template if I change a variable via @input but does if via v-model?

It doesn’t rerender list actually (I checked)

v-model is A two-way binding. The Update has to be re-applied to the dom, that requires re-render.

If you change a value via @input but don’t use that value in the template, no re-render is necessary.

You probablt refer to a part of the manual that talks about dom Updates - those are smartly done, only changed elements / attributes are actually patched.

But for each update whole virtual dom has to be re-rwnders first to get those changes via diffing against the old virtual dom.

1 Like

When I changed smth in data and Vue calculates diff — does it check actual DOM or V-DOM previous state only?

Diffing is done in the virtual DOM. The Diffs found are then patched to the DOM.