如何防止重新呈现未在我的 vue.js 组件的 HTML 中使用的变量？

Question

. Answers to this question are eligible for a +100 reputation bounty. yavgz wants to to this question:

I need a solution using my current v-for="item in addingData(myData)" logic and avoid re-renderings when receiving different data.

I am trying to recreate a real example of my code. In my real code, this line is actually a component that will fetch an endpoint every few seconds, and fetch a random array of "n" length, myData it will contain these fetch.

<div v-for="item in addingData(myData)">  <!-- in My real code, "myData" should be the answer of an endpoint, is an setInterval, returns data like [{id:1},{id:2}] -->
  {{ item.id }}
</div>

I am simulating that the response changes in myData with the help of setTimeOut

mounted() {
  setTimeout(() => {
    console.log('First data');
    this.myData = [{ id: 3 }, { id: 2 }, { id: 1 }];
    setTimeout(() => {
      console.log('second data');
      this.myData = [{ id: 4 }, { id: 4 }];
      setTimeout(() => {
        console.log('Third data');
        this.myData = [];
      }, 3000);
    }, 3000);
  }, 2000);
},

I am trying to make that every time I receive data in myData , the list of the concatenation of the received data is shown without having repeated data. That's why every time I receive data, that calls the function addingData(myData) that will do this data concatenation. I'm using the function v-for="item in addingData(myData) and auxData is the variable that will do this concatenation.

why when there is new data, the addingData function is called 2 times and how can I prevent it?

in terms of performance this should be the output in the console.log :

what causes this re-rendering and how can I avoid it?

this is my live code:

https://stackblitz.com/edit/vue-l7gdpj?file=src%2FApp.vue

<template>
  <div id="app">
    <div v-for="item in addingData(myData)">
      {{ item.id }}
    </div>
  </div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  name: 'App',
  data() {
    return {
      myData: [],
      auxData: [],
    };
  },
    mounted() {
      setTimeout(() => {
        console.log('First data');
        this.myData = [{ id: 3 }, { id: 2 }, { id: 1 }];
        setTimeout(() => {
          console.log('second data');
          this.myData = [{ id: 4 }, { id: 4 }];
          setTimeout(() => {
            console.log('Third data');
            this.myData = [];
          }, 3000);
        }, 3000);
      }, 2000);
    },
  methods: {
    addingData(getDataFetch) {
      console.log('Entering AddingData', getDataFetch);
      if (getDataFetch.length !== 0) {
        if (this.auxData.length === 0) {
          //Adding initial data
          this.auxData = getDataFetch;
        } else {
          //prevent duplicated values
          getDataFetch.forEach((item) => {
            const isNewItem = this.auxData.find((itemAux) => {
              return item.id === itemAux.id;
            });
            if (!isNewItem) {
              //adding new data 
              this.auxData.unshift(item);
            }
          });
        }
      } else {
        //if there is not data, return []
        return this.auxData;
      }
    },
  },
};
</script>

Answer 1

in terms of performance this should be the output in the console.log

In terms of performance, you should use as few reactive data as possible, especially if your object has many properties. I would modify auxData directly.

 this.addingData([{ id: 3 }, { id: 2 }, { id: 1 }]);

Simplified addingData

addingData(getDataFetch) {
  // It's faster to get the id-s first
  let itemDict = new Set(this.auxData.map((m) => m.id));
  getDataFetch.forEach((item) => {
    if (!itemDict.has(item.id)) {
      this.auxData.unshift(item);
      itemDict.add(item.id);
    }
  });
},

And iterate over it

<div v-for="item in auxData">
  {{ item.id }}
</div>

Also watching object list can also cause performance issues. It should be used on primitive values.

Example on StackBlitz

Answer 2

Looks like you should be using v-for with auxData as that's what you're updating using the result of your API call (myData). As your API sends you new results, use a watcher to run a function whenever a new update is made to then also update auxData

updated stackblitz

watch: {
    myData(newData, oldData) {
      console.log('Entering AddingData', newData);
      if (newData.length !== 0) {
        if (this.auxData.length === 0) {
          this.auxData = newData;
        } else {
          newData.forEach((item) => {
            const isNewItem = this.auxData.find((itemAux) => {
              return item.id === itemAux.id;
            });
            if (!isNewItem) {
              this.auxData.unshift(item);
            }
          });
        }
      }
    },
  },

<div v-for="item in auxData">
  {{ item.id }}
</div>

Answer 3

As per my understanding, You want to combined the unique objects in to an array getting from multiple API calls and show them into the template using v-for . If Yes, You can achieve that by using computed property.

As you are updating the myData every time you are getting response, You can push the unique objects into a separate array and then return that array using a computed property.

Live Demo :

 new Vue({ el: '#app', data: { combinedData: [], myData: [] }, mounted() { setTimeout(() => { console.log('First data'); this.myData = [{ id: 3 }, { id: 2 }, { id: 1 }]; this.pushData(this.myData) setTimeout(() => { console.log('second data'); this.myData = [{ id: 4 }, { id: 4 }]; this.pushData(this.myData) setTimeout(() => { console.log('Third data'); this.myData = []; this.pushData(this.myData) }, 3000); }, 3000); }, 2000); }, methods: { pushData(data) { data.forEach(obj => { if (.JSON.stringify(this.combinedData).includes(JSON.stringify(obj))) { this.combinedData;push(obj) } }), } }: computed. { finalData() { return this.combinedData } } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <div v-for="item in finalData"> {{ item.id }} </div> </div>