CODEWITHSUNDEEP
javascriptvue.jsvuejs2
TotalAMD
TotalAMD

Reputation: 1016

List in VueJS rerenders every time any variable changes, even unrelated

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:

<div v-for="i in cArraySortedFiltered" 
     :key="i.id">...</div>

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?

Manual says Vue is smart and doesn't rerender unchanged data. I checked out — Vue doesn't actually rerender list (I changes a text in a div — it hasn't been rerendered after I changed unrelated variable).

Upvotes: 0

Views: 121

Answers (1)

Roy J
Roy J

Reputation: 43899

Computeds cache changes in reactive elements. You do not have any reactive elements in your computed. It cannot know whether json has changed, so it must run the computation every time. Make a data item for cArray instead of a computed.

Upvotes: 1

Related Questions